Use @each to Map Over Items in a List

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style type='text/sass'>
  
  @each $color in blue, black, red {
    .#{$color}-bg {background-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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:

2

You have an extra } before the div style:

}
  
  div {
    height: 200px;
    width: 200px;
  }
</style>

:slight_smile:

1 Like
3

oh thanks ! but still i didn’t pass this challenge.

4

If you post your updated code, then I or someone else can try and help.

:slight_smile:

5 
<style type='text/sass'>
  

  
  @each $color in blue, black, red {
  .#{$color}-bg {background-color: $color;}
    
    
  

}
  
  div {
    height: 200px;
    width: 200px;
  }
</style>

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

When I copy and paste your code it works and passes all the tests. You could try resetting the code and pasting you code solution in again?

9

I am still not getting :frowning:

C
C1038×573 40.8 KB

10

I can’t see anything wrong with your code and the display of colors on the right is correct. There might be a hidden character/error somewhere. The only idea I have left is if you click reset all code and/or do a hard reset of your browser:

Hopefully, when you retype the code in, it will then pass the tests.

I really hope this works for you :smiley:

11

Tell us what’s happening:

So also getting a bug here… can someone check this out please?

Your code so far


<style type='text/sass'>

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

    @each $key, $color in $colors {
     .#{$color}-bg {background-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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

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