SASS use-each-to-map-over-items-in-a-list beta challenge impossible

SASS use-each-to-map-over-items-in-a-list beta challenge impossible
0.0 0

#1

Hi all,
I’m stuck on the challenge in subject and there’s no way to pass it, even if the preview is correct.
I’m working with Chrome in incognito mode.
Here’s a screenshot:

Your code so far



<style type='text/sass'>

  div {
    height: 200px;
    width: 200px;
  }

  @each $color in blue, black, red {
    .#{$color}-bg {background-color: $color;}
  }

</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.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36.

Link to the challenge:


#2

It does look like a bug that isn’t browser-dependent—I suggest opening an issue on GitHub!


#3

Hello guys!

Yes, it seems there’s a bug in this one too. I’ve noticed that almost all these SASS challenges behave weird. On the 1st one and the 5th one the first “run tests” did not work and the second run accepted the correct answer, without me modifying anything. This 6th challenge simply doesn’t accept the answer. So yes, there are some bugs in the background code.

Edit: After a little digging around on github I found that it seems to be related to the SASS compiler. Take a look in here: https://github.com/freeCodeCamp/freeCodeCamp/issues/12699


#4

Yes, it seems to be a bug, I even tried this will separate list of color like $colors: {color1: blue, color2: black, color3: red} but still it didn’t work.


#5

Same here! Looks like a bug.


#7

I had some trouble with most of the challenges not validating. Turned out it was a spacing issue.
Once I spread everything out to adhere to convention, it validated.

Here’s the solution and spacing to the SASS Use @each to Map Over Items in a List challenge:

@each $color in blue, black, red {
.#{$color}-bg {background-color: $color;}
}

div {
height: 200px;
width: 200px;
}

Good luck!


#8

Yep, it’s a spacing issue again.

Thanks Sasha.


#9

I had a space after “-bg” before the curly brace and once that was gone it passed.


#10

I declared the variables explicitly for colors:

$colors: (
  blue: blue,
  black: black,
  red: red
);

And it finally worked after that!