Use @each to Map Over Items in a List - Working but Failing

Use @each to Map Over Items in a List - Working but Failing
0.0 0

#1

Tell us what’s happening:
The preview window shows the background colors applied correctly, and the console style window also shows both class and background-color applied correctly. Am I missing something?

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

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


#2

Looks like it passes on Chromium but fails on Firefox.


#3

Failing on Chrome for me.


#4

Sometimes for me it fails on Chromium, but much more often than not, it passes.

There’s already an issue about this. The results apparently vary depending on the OS or browser.