Apply a Style Until a Condition is Met with @while/

Tell us what’s happening:

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/66.0.3359.181 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

Hi @raha,

Your answer is right but, maybe there is problem in challenge so you can add for every paragraph: style="font-size:5px;" and change the size incrementally by 5.

If you stuck look at the full answer here:

<style type='text/sass'>
  $x: 1;
@while $x < 11 {
  .text-#{$x} { font-size: 5px * $x;}
  $x: $x + 1;
}
</style>

<p class="text-1" style="font-size:5px;">Hello</p>
<p class="text-2" style="font-size:10px;">Hello</p>
<p class="text-3" style="font-size:15px;">Hello</p>
<p class="text-4" style="font-size:20px;">Hello</p>
<p class="text-5" style="font-size:25px;">Hello</p>
<p class="text-6" style="font-size:30px;">Hello</p>
<p class="text-7" style="font-size:35px;">Hello</p>
<p class="text-8" style="font-size:40px;">Hello</p>
<p class="text-9" style="font-size:45px;">Hello</p>
<p class="text-10" style="font-size:50px;">Hello</p>

Hope this will help you, good luck my friend and keep going up.

Regards,
Ali Mosaad

Hi I’m having an issue with this challenge. It seems like based on the output on the right that what I have is working. But it’s not getting accepted for some reason. am I missing something?! This is driving me crazy.

Edit: I just reread what you wrote. does that mean that this is right but it’s just a bug in the system? argh!

Hi @divinevalley,

yes you’re right, this is a bug in the system, don’t worry it will be fixed by the day, good luck my friend and have a good day :slight_smile:.

Regards,
Ali Mosaad

It appears all this SaSS exercises seem to have some sort of validation bug … the code is rendering the correct output on the right but it’s failing the run test. Even playing around with spacing other suggested or using a different browser doesn’t seem to fix it … It has been frustrating overall with ‘@for’, ‘@each’, ‘@while:frowning:

1 Like

I am having the same problem. It would be nice to know how can we help to solve the issue…maybe a link to a Github issue?
EDIT: just found it https://github.com/freeCodeCamp/freeCodeCamp/issues/17195