Explain the syntax for SASS - Use @for to Create a Sass Loop

HTML-CSS
1

Tell us what’s happening:

I solved it. I understand the concept but not necessarily what each part of the syntax does. Can someone explain my code below?

Your code so far

<style type='text/scss'>
@for $j from 1 through 5 {.text-#{$j}
{ font-size: 15px * $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/122.0.0.0 Safari/537.36

Challenge Information:

SASS - Use @for to Create a Sass Loop

2

Hi @raven1177

This part of the code is a for loop.
It is iterating though each of the classes by accessing .text-#{$j}

Where #{$j} is replaced with a number starting from 1
So the first loop creates the class selector .text-1

Then this part creates a unique styling property for each selector the loop creates. For .text-1 the font-size is 15px * 1

The next iteration $j becomes 2, and so on.

Happy coding

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.