SASS - Apply a Style Until a Condition is Met with @while

HTML-CSS
1

Tell us what’s happening:

Hello.

I am stuck on this question, can someone please help me

Thanks

Your code so far

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Challenge Information:

SASS - Apply a Style Until a Condition is Met with @while

2

Hi @iskren500

What is your question?

Happy coding

3

have you maybe removed the starting code? the style element must still be there

4

@iskren500 in case you don’t find it anymore, this is your previous topic. Did you try resetting the step to restore the style element?

5

No, I still don’t get it.

this is what’s missing:

  • 4. Your .text-1 class should have a font-size of 15px.

  • Failed:5. Your .text-2 class should have a font-size of 30px.

  • Failed:6. Your .text-3 class should have a font-size of 45px.

  • Failed:7. Your .text-4 class should have a font-size of 60px.

  • Failed:8. Your .text-5 class should have a font-size of 75px.

This is the question:

First, define a variable $x and set it to 1. Next, use the @while directive to create the grid system while $x is less than 13. After setting the CSS rule for width, $x is incremented by 1 to avoid an infinite loop.

Use @while to create a series of classes with different font-sizes.

There should be 5 different classes from text-1 to text-5. Then set font-size to 15px multiplied by the current index number. Make sure to avoid an infinite loop!

6

Your code passes the test for me.

Reset the step and try it again.

Watch out for this instruction:

create the grid system while $x is less than 13

Although as long as you end up with at least 5 classes it should be fine.

1 Like
7

ok great, thanks I tried again and it worked

1 Like