Freecodecamp: Sass challenges don't work
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! 👍
ryanarnouk
All 39 comments
@Azbo400 Thank you for reporting this issue. It looks like we don't actually support compiling the Sass yet 😅
systimotic
on 21 Jan 2017
@systimotic Oh haha, that makes sense! Thank you 😄
ryanarnouk
on 21 Jan 2017
Oh sorry! We should have given folks a head's up that this section wouldn't work properly. Thanks for the issue, @Azbo400
HKuz
on 21 Jan 2017
@HKuz That's fine, no problem. 😃
ryanarnouk
on 21 Jan 2017
Yeah. Its not working. Will there be any notification when it is fixed?
ppmakeitcount
on 22 Jan 2017
We don't support the "saas" yet! Lmao!!!
On Jan 22, 2017 12:19 AM, "Pramod Potdar" notifications@github.com 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
.
ChrisD1986
on 22 Jan 2017
They don't want any sass from you. Jokes
rudolphh
on 6 Feb 2017
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
betaalpha987
on 12 Mar 2017
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
ahmadabdolsaheb
on 1 Jun 2018
@ahmadabdolsaheb Awesome - good call. Do you have any idea how to go about refactoring them?
QuincyLarson
on 3 Jun 2018
@QuincyLarson I'm on it
ahmadabdolsaheb
on 4 Jun 2018
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
ahmadabdolsaheb
on 4 Jun 2018
@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.
anku255
on 16 Jun 2018
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
on 21 Jun 2018
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
mattszcz
on 25 Jun 2018
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]
MikeForde
on 10 Jul 2018
@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.
jacobvarner
on 11 Jul 2018
I couldn't get them to work in Safari or Chrome 67
Removing all indentation and spacing within the
Hello
Hello
Hello
Hello
Hello
mahmoud-coo6
on 19 Jul 2018
You may add your color style to div tag. This works for me.
<div class="blog-post" style="color: red;">
dikiaap
on 22 Jul 2018
@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.
dikiaap
on 22 Jul 2018
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.
mahmoud-coo6
on 23 Jul 2018
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>
flyfishingbarbara
on 26 Jul 2018
here the solution @flyfishingbarbara : there some time not worked because there is bug in website
mahmoud-coo6
on 27 Jul 2018
the issue is back with @for and @each.
drex44
on 27 Aug 2018
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
Rock-son
on 4 Sep 2018
@raisedadead @ValeraS
Does this close this issue?
https://github.com/freeCodeCamp/freeCodeCamp/pull/27716
paulywill
on 31 Oct 2018
@paulywill This is not related to this issue, and the issue has already been solved in the master branch.
ValeraS
on 31 Oct 2018
lol, I met the same problem...
ZTYZZ
on 24 Mar 2019
@ZTYZZ Do you experience the same problem on the beta site?
RandellDawson
on 24 Mar 2019
On Firefox Developer Edition (72.0b2 (64-bit)) it does not work.
nmichalakis
on 4 Dec 2019
@nmichalakis What errors are you seeing in the browser console?
RandellDawson
on 4 Dec 2019
@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!)
nmichalakis
on 4 Dec 2019
Please open a fresh issue with these details. Thanks.
raisedadead
on 5 Dec 2019
SASS use-each-to-map-over-items-in-a-list beta challenge impossible
@each $color in blue, black, red {
.#{$color}-bg {background-color: $color;}
}
Ukmandal
on 19 Jun 2020
Related issues
ar5had
·
3Comments
vaibsharma
·
3Comments
danielonodje
·
3Comments
itsmikewest
·
3Comments
cmal
·
3Comments
Most helpful comment
You may add your color style to div tag. This works for me.