Freecodecamp: Sass challenges don't work

[ryanarnouk]

Challenge storing-data-with-sass-variables has an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36.

<style>
$text-color: red;

.header{
  text-align: center;
}
.blog-post h2 {
  color: $text-color;
}
</style>

<h1 class="header">Learn Sass</h1>
<div class="blog-post">
<h2>Some random title</h2>
<p>This is a paragraph with some random text in it</p>
</div>
<div class="blog-post">
<h2>Header #2</h2>
<p>Here is some more random text.</p>
</div>
<div class="blog-post">
<h2>Here is another header</h2>
<p>Even more random text within a paragraph</p>
</div>

Hello Everyone, I think I found a bug in the challenge Storing Data With Sass Variables. I think I did everything right, but the h2 and the .blog-post elements colour doesn't change to red. I pass two of the user stories but not these:
Your .blog-post element should have a color of red.
Your h2 elements should have a color of red.

It also doesn't change red. But it passes the user stories:
Your code should have a Sass variable declared for $text-color with a value of red.
Your code should use the $text-color variable to change the color for the .blog-post and h2 items

Thank you in advance, and the new things in Beta seem amazing keep up the great work! Can't wait to work through more of them! 👍

[systimotic]

@Azbo400 Thank you for reporting this issue. It looks like we don't actually support compiling the Sass yet 😅

[ryanarnouk]

@systimotic Oh haha, that makes sense! Thank you 😄

[HKuz]

Oh sorry! We should have given folks a head's up that this section wouldn't work properly. Thanks for the issue, @Azbo400

[ryanarnouk]

@HKuz That's fine, no problem. 😃

[ppmakeitcount]

Yeah. Its not working. Will there be any notification when it is fixed?

[ChrisD1986]

We don't support the "saas" yet! Lmao!!!

On Jan 22, 2017 12:19 AM, "Pramod Potdar" [e-mail] wrote:

Yeah. Its not working. Will there be any notification when it is fixed?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12699#issuecomment-274311826,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVHZeUIbLrZVFpBbIy0z9uTcDlOwHHoDks5rUvULgaJpZM4LqJWk
.

[rudolphh]

They don't want any sass from you. Jokes

[betaalpha987]

I agree that it'd be a good idea to warn people that Sass doesn't work yet.

In the meanwhile, I recommend folks follow the Sass official page's guide to installing a Sass compiler and following their guide (and / or FCC's Sass tutorials) on their own machines. The guide starts here: http://sass-lang.com/install

[ahmadabdolsaheb]

The Challenge storing-data-with-sass-variables needs to have its last two tests refactored so it could check for the use of the assigned variable

[QuincyLarson]

@ahmadabdolsaheb Awesome - good call. Do you have any idea how to go about refactoring them?

[ahmadabdolsaheb]

@QuincyLarson I'm on it

[ahmadabdolsaheb]

the following might come handy if anyone wants to tackle this issue.
the location of the tests to be refactored:
https://github.com/freeCodeCamp/freeCodeCamp/blob/6d7092928e852755fa0d4d9489b3c8748b466a94/seed/challenges/03-front-end-libraries/sass.json#L25

the are four tests that should be replaced with the following two.

"tests": [
        {
          "text": "Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.",
          "testString": "assert(code.match(/\\$text-color\\s*?:\\s*?red\\s*?;/g), 'Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.');"
        },
        {
          "text": "Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.",
          "testString": "assert(code.match(/\\.blog-post\\s*?\,\\s*?h2\\s*?{\\s*?color:\\s*?\\$text-color\\s*?;/g), 'Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.');"
        }
 ]

please test the solution before making a PR

[anku255]

@ahmadabdolsaheb

please test the solution before making a PR

How should I go about testing it? If I make changes in the seed files that reside in freecodecamp repo then it won't reflect in the learn repo because it uses @freecodecamp/curriculum node module to get the challenges.

Even if I make the changes in curriculum repo locally, it won't reflect in the learn repo.

[mattszcz]

I'm going through the Sass lessons now.
I'll post any additional lessons that are broken.

The full list of Sass lessons with broken tests:
https://learn.freecodecamp.org/front-end-libraries/sass/store-data-with-sass-variables
https://learn.freecodecamp.org/front-end-libraries/sass/use-for-to-create-a-sass-loop
https://learn.freecodecamp.org/front-end-libraries/sass/use-each-to-map-over-items-in-a-list
https://learn.freecodecamp.org/front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while

Here's a visual aid:

[mattszcz]

I also have confirmed intermittent test passing (by spamming "Run the tests") on:
https://learn.freecodecamp.org/front-end-libraries/sass/store-data-with-sass-variables
https://learn.freecodecamp.org/front-end-libraries/sass/use-each-to-map-over-items-in-a-list

but not on the other 2 broken Sass lessons (these always fail to pass):
https://learn.freecodecamp.org/front-end-libraries/sass/use-for-to-create-a-sass-loop
https://learn.freecodecamp.org/front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while

[MikeForde]

I struggled initially with same issues but so far I've got all to pass (up and including the @while example - not tried the others yet) - the issue seems to be white space
For some e.g. the @while example even needed to remove any indenting of the SASS bit

Try deleting any blank lines between the code and - if that doesn't solve it - not indenting the SASS code at all.
[using FCC with Safari 11.0.2]

[jacobvarner]

@MikeForde This worked for me when switching to Safari to get passed this one module. However, I still could not get it to work in any way while running it in Chrome 67.

[mahmoud-coo6]

I couldn't get them to work in Safari or Chrome 67

Removing all indentation and spacing within the

Hello

Hello

Hello

Hello

Hello

[dikiaap]

You may add your color style to div tag. This works for me.

<div class="blog-post" style="color: red;">

[dikiaap]

@mahmoud-coo6 Does your method work on Apply a Style Until a Condition is Met with @while?
I have a warning here: Your .text-1 class should have a font-size of 5px.
I'm pretty sure the font-size is 5px.

[mahmoud-coo6]

I fix Apply a Style Until a Condition is Met with @while? Challenge by using Firefox instead of google-chrome it's worked for me.

[flyfishingbarbara]

i had add background style to the div tags..... to get these bugged sass challenges to pass their test....!!

<div class="blue-bg" style="background-color: blue"></div>
<div class="black-bg" style="background-color: black"></div>
<div class="red-bg" style="background-color: red"></div>

[mahmoud-coo6]

here the solution @flyfishingbarbara : there some time not worked because there is bug in website

[drex44]

the issue is back with @for and @each.

[Rock-son]

It wouldn't work on Chrome 68.0.3440.106 and not on Opera 55.0 but it worked flawlessly on Firefox 59.0.2 (all 64-bit). Last three exercises did need a bit of "Run the Test" button spaming though

[paulywill]

@raisedadead @ValeraS
Does this close this issue?
https://github.com/freeCodeCamp/freeCodeCamp/pull/27716

[ValeraS]

@paulywill This is not related to this issue, and the issue has already been solved in the master branch.

[ZTYZZ]

lol, I met the same problem...

[RandellDawson]

@ZTYZZ Do you experience the same problem on the beta site?

[nmichalakis]

On Firefox Developer Edition (72.0b2 (64-bit)) it does not work.

[RandellDawson]

@nmichalakis What errors are you seeing in the browser console?

[nmichalakis]

@RandellDawson i found the "bug" if there is a space between the variable name and the ":" it does not compile correctly. Is this something that happens on plain .scss files too?
So for example if i run
$var-name : color; (a space before and after ":" ) it does not compile but if i run the same
$var-name: color (no space right after $var declaration, it works!)

[raisedadead]

Please open a fresh issue with these details. Thanks.

[Ukmandal]

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

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