Tell us what’s happening:
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.
lisarko8077:
$colors:(color1:blue,color2:black,color3:red);
@each $key, $color in $colors{
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.
oghusky:
$colors:(color1:blue,color2:black,color3:red);
@each $key, $color in $colors{
.#{$color}-bg{background-color:$color;}
}
It doesn’t work, neither on Chrome, Firefox, also with this code that you put in. It seems to not matter spaces
SpadeX
July 18, 2018, 10:27am
6
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.
@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.
