Use @for to Create a Sass Loop challenge

Use @for to Create a Sass Loop challenge
0

#1

Tell us what’s happening:

Your code so far


<style type='text/sass'>
 @for $j from 1 through 6 {
 .text-#{$j} {font-size:10px*$j;}
 .text-#{$j} {font-size:20px*$j;}
 .text-#{$j} {font-size:30px*$j;}
 .text-#{$j} {font-size:40px*$j;}
 .text-#{$j} {font-size:50px*$j;}
 } 
</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>

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/use-for-to-create-a-sass-loop


#2

There are a couple of errors here,
Firstly, you need to loop from 1 to 5 and not 6.
Next, when inside a for loop, the whole body of ‘for’ loop is iterated for each cycle, so here, your code generates 5 class each time, which sums up to a total of 5 * 5 = 25 total css classes, which is not what we want here.

this is the only content you need inside your for loop, because for each value of $j (1, 2, 3, 4, 5), it will multiply by 10px to give us the resulting values that are expected.
for every other line, ex:

Here, for each value of $j it will multiply by 50px and the result will be 250px for value of $j = 5.

So, your loop should only be:
@for $j from 1 through 5 {
.text-#{$j} {font-size:10px*$j;}
}
Also, it didn’t work on chrome for me, but executed successfully on Firefox, you might get an error there too.

Lastly, for Sass exercises, you can first try your code at https://www.sassmeister.com/ to look at what will be the resulting css for your sass code. :slight_smile:

Hope this was helpful :slight_smile:


#3

Thank you very much for your help. I have done this.