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

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

#1

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


#2

it is working in chrome. Windows 10.


#3

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.


#4

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.


#5

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


#6

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


#7

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 ?


#8

@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.