Help using @each to Map Over Items in a List

Tell us what’s happening:

My code matches the example exactly and I can’t figure out why it’s not being accepted.

Your code so far


<style type='text/sass'>
  $colors: (color1: blue, color2: black, color3: red);

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

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

Are you by any chance using Edge, IE, or Safari as your browser? Free Code Camp has been updated to use newer technologies. It makes the application much faster and it means that we can go much longer without having to do a huge migration like the recent one. However, Edge, Internet Explorer, and Safari are very bad about choosing not to adhere to standards and support new functionality in JS and CSS. Right now, that means that these browsers exhibit lots of unexpected behavior. If you become a web developer you will come to hate these browsers with every fiber of your being.

I’m using Google Chrome

Your solution isn’t quite right. What property are you supposed to be setting in your @each loop?

The $color property…the instructions say: “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.”

Read the instructions again carefully. The color property is not what you are required to set.