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

#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:


Use @each to map over items in a list - possible bug?
#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!


#11

I had to use (spacing critical):

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

And I had to use Firefox. It still won’t pass on Chrome!?!


#12

Note: the ‘$key’ variable is critical, too…


#13

I tried your spaceing solution and changed from $key to $name but still doesn’t work, neither on Firefox


#14

Hi. I just tried it again.

It still utterly fails in Chrome.

To get it to pass in Firefox this time, I had to test it twice right in a row.
It failed the first time, but passed the second time.

I hope that help. Please let me know if it works for you!


#15

If you are getting the right colors in the right divs, then the code is technically correct. The test is just evidently still buggy, though…


#16

Hello,
Yes it is still very buggy. I tried it in three browsers: Chrome, Firefox and Safari. It only seems to work in Safari.

Thanks.


#17

still buggy on chrome.


#18

Yep. Same problem. Spacing should not be an issue - in fact you can argue that, as spacing is used for readability of code and ease of maintenance, forcing people to use a particular spacing can be teaching them the wrong way to code.

So far the SASS module is very disappointing for the way tests are failing for trivial issues that don’t relate to correct functionality. I’ve been coding for very many years, but for someone new it must be very disappointing and could undermine their confidence


#19

tried same thing and it worked on Mozilla… not in Chrome