Freecodecamp: Beta - Test Case Broken - Sass: Use @for to Create a Sass Loop

[knight2]

Challenge Name

http://beta.freecodecamp.com/en/challenges/sass/use-for-to-create-a-sass-loop?

Issue Description

The test case for this challenge is broken.

SASS does not appear to be working for the in browser editor, as hitting submit doesn't properly show the SASS changes.

Using an editor like codepen that has sass configured will show that the code does what is instructed.

FCC says it fails these tests, but the code is correct, FCC is wrong.
Your .text-1 class should have a font-size of 10px.
Your .text-2 class should have a font-size of 20px.
Your .text-3 class should have a font-size of 30px.
Your .text-4 class should have a font-size of 40px.
Your .text-5 class should have a font-size of 50px.

Browser Information

• Browser Name, Version: Chrome
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Desktop

Your Code

<style>
  @for $j from 1 to 6{
    .text-#{$j} {font-size: 10px* $j};
  }


</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

Screenshot

[tsss85]

I've the same problem !

[teedoot]

My code appears to be correct but can't seem to pass it either using "Through" or "To". I keep getting the following issues, anyone knows how to resolve it?

[bluchill]

Hi guys had the same problem - not passing this challenge. I seem to have temporarily solved/passed it by starting to delete spaces inside the last section of the code: {font-size: 10px*$j;}.

Initially I had spaces after 10px and then another space after the multiplication(*) sign. At some point after deleting these two spaces it passed the test, and it passed using the word "through" instead of "to."

I say temporarily because when I went back and changed to "1 to 6" it seemed to not pass again...put it back to "through" and passed again.

Definately buggy...

Good luck and happy coding.

[danchann]

Having the same problem, it won't pass even with bluchill's suggestions.

[bluchill]

Hi danchann,

can I see your code?

[danchann]

<style type='text/sass'>

@for $j from 1 to 6 {
  .text-#{$j} {font-size: 10px*$j;}
}

</style>

I've already tried a lot of other variations as well.

[bluchill]

Sometimes even after deleting all the spaces (with mine I only had to delete spaces inside the curly braces) try and refresh the page a couple of times and most importantly you have to use "to" not "through" as they are asking you to do in the exercise. Eventhough the output is the same I find mine only passes with "to" - as long as you know the difference between the two.

[bluchill]

Yup your code looks fine to me, try even deleting the space after "font-size:" before the 10px...and refresh the page.

[danchann]

Strange!

Tried with/without the space before the 10px removed, same thing.

[bluchill]

Hmm that's wierd...I was about to ask you if your output is correct (as in the heading are getting bigger as they go down the list?).
But yours says only your first element is not conforming. Mine usually said all of them were not correct (as in they did not have the green ticks) - but my output was showing correctly what was required, so I just kept refreshing and deleting spaces.

[bluchill]

danchann you also seem to have a inverted coma in front of your first style...hope it just made it here accidentally and it is not in your code.

[JQuinnie]

I had the same issue, took @bluchill advice (thanks!!) and removed spaces from code like below:

@for $j from 1 to 6 { .text-#{$j} {font-size:10px*$j;} }

Worked first thing I changed, then I went back and paste it but it didn't work, did a refresh to page and then it worked again. Definitely glitchy.

[danomah]

Hmmm... also tried all formatting changes I could think of but no joy. A glitch I say!

[zlayabekrija]

Ok guys,
I tried on first and this challenge also and it worked.
What you need to do is to manually (hardcode) given parameters in classes.
Example:
else than using for loop,if you want to pass the test do following:
<p class="text-1" style="font-size:10px;">Hello</p>
Hello
This is passing 100%.

[penggunaphp]

Try refresh the page or revisit the page

[P1xt]

@QuincyLarson This is still an issue. The test is very sensitive to whitespace and formatting exactly as the instructions instruct doesn't work.

[QuincyLarson]

@P1xt Thanks for confirming this is still an issue. It sounds like we need to make the tests more robust and use better regular expressions. We have also discussed using an abstract syntax tree to evaluate code. I'm open to your suggestions on this, and any pull requests you'd be interested in putting together.

[P1xt]

@QuincyLarson Actually, there's a chance that this (along with a ton of other closed Sass issues) are related to
https://github.com/freeCodeCamp/freeCodeCamp/issues/17570

It might be a platform issue, not a test case issue.

[npellow]

I've tried it with the normal whitespace; tried it without the added white space; tried clearing cache, resetting the code. The code works, just doesn't want to pass the tests. The first screenshot is in Chrome. I tried it on IE (second screenshot), and it wouldn't work either; it seemed to get stuck when I clicked Run the Tests.

[precious-adeyinka]

click the submit button repeatedly if you are having this issue of submitting, it is a break in the program and not your fault if you have the following code you are definitely right:

@for $j from 1 to 6 {
.text-#{ $j } { font-size: 10px * $j ; }
}
I hope this helps...

[mattszcz]

12699 root issue

[tomavanc]

You can pass the challenge if you use the '_through_' example instead of the '_1 to 6_'.

[tj3407]

white space around '$j' in '.text-#{ $j }' worked for me .. wouldn't pass it otherwise

[nurulilmaan]

[shtscompany]

This is working 100%`

<style type='text/sass'>

  @for $j from 1 to 6 {
    .text-#{$j} { font-size: 10px*$j; }
  }
.text-1{
  font-size: 10px;
}
.text-2 {
  font-size: 20px;
}
.text-3{
  font-size: 30px;
}
.text-4{
  font-size: 40px;
}
.text-5{
  font-size: 50px;
}

</style>

md5-8d929e77eea7827b3dec9d5fb2972815




md5-b5a53935d985759d1d00ab689076099b




md5-1271795cd278fffd8b9a5dd32d031e3d


<p class="text-5">Hello</p>`

[Nirajn2311]

As this issue is solved, I am closing this issue.

If this was a mistake, please open the issue with a reason.

[mubarak23]

still getting the same error

[MysticBlaze085]

I am currently getting this error

[P1xt]

@Nirajn2311 this wasn't solved, the challenge is still broken in that following the instructions will not guide you to a correct solution. All of the 'solutions' you see above are workarounds that people came up with to get around how broken this challenge is.

[pathgeek]

@Nirajn2311 this isn't a solved issue.

[RandellDawson]

@pathgeek There is a fix, but it has not been deployed to production. Once the master branch has been deployed, users will not experience this issue anymore. We hope to have master ready to be to deployed in the near future.