Use @each to Map Over Items in a List; why it does not work

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style type='text/sass'>
  @each $color in blue, black, red {
  .#{$color}-bg {color: $color;}
}
  
  
  div {
    height: 200px;
    width: 200px;
  }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/use-each-to-map-over-items-in-a-list

2

Read carefully. You must to iterate map not list. And you must change the background color, not color.

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

@each $key, $color in $colors {
  .#{$color}-bg {background-color: $color;}
}
1 Like
3

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

@each $key, $color in $colors {

.#{$color}-text {color: $color;}

}

.blue-bg

{

background-color:blue;

}

.black-bg

{

background-color:black;

}

.red-bg

{

background-color:red;}

5

.#{$color}-text stands for .blue-text, .black-text, etc. You have .blue-bg, .black-bg, etc. Change so:

.#{$color}-bg

.blue-bg{
6

You also have to set the background-color: property not color:.

7

Thanks all. I figured it later…lol

8

Thanks for the update.

It is always best to let people know if you have solved the problem. You can also mark the thread as solved if you want to make it more clear. You can just give it to yourself.

9

Oh, thats very nice actually… i didnt know this… thanks…