Problem(?) using @while in Sass

HTML-CSS
1

Tell us what’s happening:
the requirements : use @while (Sass) loops text-1 to text-10 and each font-size should be 5px multiplied by its index (ex: font-size for text-5 should be 25px)

Why this code can’t pass the test?

Your code so far


<style type='text/sass'>
$x: 1;
@while $x < 11 {
    .text-#{$x} { font-size: 5 * $x }
    $x: $x + 1;
}
</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>
<p class="text-6">Hello</p>
<p class="text-7">Hello</p>
<p class="text-8">Hello</p>
<p class="text-9">Hello</p>
<p class="text-10">Hello</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while/

2

Do the same in Mozilla, it’ll work

Capture
Capture1366×732 50.9 KB

1 Like
3

First of all your code is 100% right and you should pass the challenge. The problem i have encountered with this challenge was the “autorun” of the code on fcc (that i think its kinda a bug). Let me explain:
I have entered this code:

$x: 1;
@while $x < 11 {}

and the second after i was closing “}” i have entered an infinite loop because of the code “autorun” function that doesn’t allowed me to complete all the code i wanted before i manually say when the code must be run. Why i did that, was because i get used whenever i use an editor that don’t have the autocomplete function any “tag” i open i also close it myself before going on with the other code to be sure my syntax is well written.

How i overcome this habit? just opened a text editor, wrote all my code in there and after copy paste it into the challenge and i arrived to the same result as @phoenixabhishek but in chrome.

4

Thank you! It works in mozilla

5

Thank you for your response!
well, we have a same habit writing close tag before fill in the code, this ‘autorun’ makes me write infinite loop and crashed my chrome too…
I did copy paste the code from sublime to the challenge but it still can’t pass …
then I tried using mozilla and the magic happens…
so I assume there is a bug for this challenge in Chrome or anything? just my ‘newbie curiousity’

6

That’s amazing…:slight_smile:
Don’t forget to mark your queries as solved when you get a response that works…

7

Whatever update happened in the last 23 days took away the ability for this to work in mozilla now. It does NOT work in mozilla at the moment, and neither does my equivalent code. The font sizes change in the display but the tests can’t read that they match the correct sizes.