Learning sass: use @each to map Over items in a list

HTML-CSS
1

I am having a hard time figuring out how to set the background color. I thought my code would work but every time I run the test it says the background color is not set. Can anyone tell me what I am missing?

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/87.0.4280.141 Safari/537.36.

Challenge: Use @each to Map Over Items in a List

Link to the challenge:

2

You are using two dashes (-) in the class names you are targeting. If you look at the actual class names, there is only one.

3

@ArielLeslie
Thank you!

4

so instead it should be:


@each $color in blue, black, red {

    .#{$color}-bg {background-color: $color;}

  }

?

5

Does it work?

6

no it still says that it needs to change the background color

7

It passes the test when I run it. Did you change anything else? You might want to reset the challenge to remove any accidental changes you may have made to the template code.

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.