@while loop not working for Sass: Apply a Style

Tell us what’s happening:

It looks like the code is returning the correct values in the chrome inspector. What am I doing wrong?

Your code so far


<style type='text/sass'>
  
 $x: 1;

  @while $x < 11 {
    .text-#{$x} { font-size: 5px * $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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 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

Your code IS correct. You may need to refresh the page and run the tests again. Maybe try a different browser if that does not work.

1 Like

Ha ha. That did the trick. Thanks!

I’m having the same problem. I’ve tried with Chrome and Safari, no luck with either browser. Emptied my cache as well, restarted the browser and even restarted the computer.

Any other suggestions?

<style type='text/sass'>

 $x: 1; 
 @while $x < 11 { 
  .text-#{$x} { font-size: 5px*$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>

I also have that problem

 $x: 1; 
 @while $x < 11 { 
  .text-#{$x} { font-size: 5px*$x; }
  $x: $x + 1;
 }

When i ran this code it throwed errors, but when i replaced "$x < 11" with "$x <= 10" , it passed the test. Maybe FCC is requiring the exact way of calculation they had provided in test cases.

It’s some kind of situational bug. Not affecting all browsers equally either.
There’s a ticket open on Github to fix it. You can follow progress on the here: https://github.com/freeCodeCamp/freeCodeCamp/issues/12699

The test passes for some people but not for others, and there are ways to try to trick the test into working but nothing consistently works for everyone. Switching to “$x<=10” doesn’t fix it in my code.

It works correctly in Firefox…maybe you should try that.

I’ve run all three of the SASS tests that are causing issues in Firefox, Safari, Chrome (and Vivaldi and Opera as well, but they share their engine with chrome.) None of them worked. The only solution I’ve found has been random chance (occasionally the tests will pass for one of the challenges) or the ‘remove whitespace and spam the run button’ approach detailed in the Github I linked to above.

In Chrome :point_down:

In Firefox :point_down: