Use @each to map over items in a list - possible bug?

So I am pretty sure I have understood this challenge and the code I have should work. On the display on the right, the background colors show up like they are supposed to, but yet it won’t pass the criteria. It says my black bg should be black, blue bg should be blue and so on. And on the display they are. Am I missing something, or is this just a bug? (p.s. I also tried the map version using the $key variable and it did the same thing)

my code below:

-Write an @each directive that goes through a list: blue, black, red and assigns each variable to a .color-bg class, where the “color” part changes for each item.

-Each class should set the background-color the respective color.

1 <style type='text/sass'>
2   @each $color in blue, black, red {
3    .#{$color}-bg {background-color: $color;}
4  }
6  div {
7    height: 200px;
8    width: 200px;
9  }
10 </style>
12 <div class="blue-bg"></div>
13 <div class="black-bg"></div>
14 <div class="red-bg"></div>

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


1 Like

Yes, there’s a bug. Sometimes it won’t pass if you don’t use the expected spacing.

Have a look: SASS use-each-to-map-over-items-in-a-list beta challenge impossible

1 Like

Hey had the same bug, tried today again and was able to solve it this is what i had today when i was successfull.

  $colors: (color1: blue, color2: black, color3: red);

    @each $key, $color in $colors {
      .#{$color}-bg { background-color: $color;}
  div {
    height: 200px;
    width: 200px;