Bug on Use @each to Map Over Items in a List

Tell us what’s happening:
I have the below code that runs in CodePen but not in FCC. I also tried on Mozilla and nothing…

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 6.3; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0.

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

it is working in chrome. Windows 10.

The code should work, but you may want to try using Chrome for the FCC curriculum. You may have to refresh the page and rerun the tests also.

It’s the spacing in your code. Space it out the same way it is in the example and it’ll work. I just had this same issue.

It doesn’t work, neither on Chrome, Firefox, also with this code that you put in. It seems to not matter spaces

It 's working On Firefox. Please try to run !!!

I am trying with above code and doesn’t work while in the preview is applied perfectly.
Can you write your code with right spaces ?

@lisarko8077

I had the same issue with many other challenges. My problem was that i was using an extension (Dark reader) which change background color. So i disabled it and test the code again it worked.