Use @each to Map Over Items in a List.....What is the problem here? I don't think my code be wrong stil showing wrong

Use @each to Map Over Items in a List.....What is the problem here? I don't think my code be wrong stil showing wrong
0

#1

Tell us what’s happening:

Your code so far


<style type='text/sass'>
  
  @each $color-bg in blue,black,red {
  
  
  .blue-bg{
  background-color: blue;
  }
  .black-bg{
  background-color: black;
  }
  .red-bg{
  background-color: red;
  }
  }
  
  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/68.0.3440.106 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

Notice the example in the instructions:

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

Use that as a model.


#3

try with this too but still seems wrong


#4

Show us the exact code you used.


#5

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

Here be the link.


#6

No, that is the link to the exercise. It doesn’t contain your code, except on your browser. Please cut and past your code into your reply so we can see it. Then I can tell you what is wrong with it.


#7

after this they seemed wrong.


#8

Again, I asked you to cut and paste the code, not take a pic. But OK…

Get rid of lines 7-15. All the magic is going to happen on line 5.

Look at the example I gave you:

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

That’s basically what you need to do. But instead of $color for the variable name, you have $color-bg. That’s fine. You could have called it $elephant-pajamas it doesn’t matter as long as it’s consistent.

OK, but the way you have your variable used, your classes will be like .blue-background-color. But according to the instructions you need .blue-bg.

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.

So, you need to fix .#{$color-bg}-background-color in your code. Remember that #{$color-bg} is just the variable name and will be replaced with blue, black, red. The {background-color: $color-bg;} part looks correct. I think you just need to fix the class names that are being created.