Use @for to Create a Sass Loop challenge

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;}

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

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 to look at what will be the resulting css for your sass code. :slight_smile:

Hope this was helpful :slight_smile:

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