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

HTML-CSS
#1

Tell us what’s happening:
Trying to figure this one out of my own, but not sure what I’m doing wrong. My code looks like this because I looked at the example, but it came out wrong. What is it that I’m doing wrong with this code?

Your code so far


<style type='text/sass'>
  
$x: 1 through 10;
@while $x < 10 {
    .col-#{$x} {font-size: 5px}
    $x: $x*5;
}
  
</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; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 Avast/73.0.1258.87.

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

#2

This line won’t work because this is wrong syntax. You don’t need through 10;

Remember you are working with a variable x. Instead of giving fixed font size of 5px. You should give it x.

#3

<style type=‘text/sass’>

$x: 1;

@while $x < 10 {

.col-#{$x} {font-size: x}

$x: $x*5;

}

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

This is my new code, yet I still have it wrong. I’m not sure what I’m doing wrong, but I’m hoping to get some clarity on it.

#4

You are creating a set of classes called col-1 to col-10

.col-#{$x}

And yet your markup expects a class called class="text-N"

<p class="text-1">Hello</p>

You may looping correctly, but creating the wrong classes :wink:

EDIT:
Also revisit how you access a variable in Sass

{font-size: x}

As well as what the instruction asks

Then set font-size to 5px multiplied by the current index number

#5

I don’t understand what you said. I’m sorry. My learning disability keeps kicking in at a horrible time, and I’m sick and tired of having a learning disability. I’m learning this for school, and my professor said we’d be getting into this even more these next few weeks, seeing as we’re doing CSS and HTML along with JavaScript and jQuery.

#6

I’ll try to break it down for you @LBDemaree, please bear with me :slight_smile:

The lesson is about using the @while method, that, like in many other languages keep doing a specific task as long as some condition is true (hence called while).

In this case, the goal is to create 10 CSS classes, that increases the font-size of the element by multiple of 5 (so 5px, 10px, 15px … up to 50px).

In order to loop then we need some sort of counter, that goes from 1 to 10, and that will be our condition for while to execute.
Remember that in programming, every time you declare a loop, you should update your condition to avoid an infinite loop.

$x: 1 // we create a counter

@while $x <= 10 { 
// do something 

// don't forget that this will continue running,
// so we need to remember to update our counter
// or the condition will always be true
// and the loop will never stop
 $x: $x + 1
}

Now that we have our “body” we need to fill to “do something” part, since as it is it does nothing interesting.

So inside the curly braces we can declare the class that we want to be created with each iteration:

An example that is NOT the correct answer that creates a class called margin-N that gives N * 10px of margin

$x: 1
@while $x <= 10 {
// remember that on each iteration $x will change
// will start from 1, 2, 3 ... all the way to 10.

// so we can use it to give a unique name like margin-5, margin-1, margin-10...
// and to calculate our margin 
// 10 * 1 = 10
// 10 * 2 = 20
// 10 * 3 .. and so on
  .margin-#{$x} { margin: 10px * $x; }
  $x: $x +1;
}

With all this, you should be able to create a loop that makes the class you actually want, with the value that you want.

Hope this helps :+1:

#7
$x: 1; 
> @while $x < 10 {

.col-#{$x} {font-size: 10px * $x}

> $x: $x + 1;
> }
> 
> </style>

Not sure what I did wrong this time. I'm so confused here this morning. I haven't had any food yet, so maybe that'll help my brain function correctly.
#8

Let’s read it line by line and analyse what you wrote:

  • $x: 1;
    initalization. Looks good

  • @while $x < 10
    this reads as long as x is smaller than 10. This means from 1 to 9.
    Don’t we wanted 10 to be included?

  • .col-#{$x}
    we create a class called col-1, col-2, col-3 ….
    Don’t we wanted a set of classes called text? text-1 to text-10 says the lesson

  • font-size: 10px * $x
    This means we create multiples of 10. But the lesson ask for font-size to 5px multiplied by the current index number.

  • $x: $x + 1;
    This updates our counter. Looks fine.

Let’s hope to put some clarity :sunny:

#9

The part I’m not understanding is this:

#10

The instructions state:

There should be 10 different classes from text-1 to text-10

The first class name should be text-1. Instead your first class is named col-1.

#11

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

That’s my new code, but, I still got the errors. Am I missing something again?

#12

You are very close. Your text-1 class has a font-size of 10px. The instructions say it should be 5px. Why? Because you should should be multiplying $x by 5px instead of 10px.

Also, you need to make sure you have 10 styles instead of 9 styles.

#13

Okay, I got 1 error, and that is this:

Your .text-10 class should have a font-size of 50px.

What am I doing wrong now? I changed the code to be that. And where did I say 9 styles at? Or am I needing to change 10 to 11?

#14

@RandellDawson

Thank you so much, sir! I finally figured it out. My brain is scattered because of how I have to use pseudocode in school again.

#15