Tell us what’s happening:
Describe your issue in detail here.
Hello, I’my trying to use a @for
to create a Sass loop:
Write a @for
directive that takes a variable $j
that goes from 1 to 6.
It should create 5 classes called .text-1
to .text-5
where each has a font-size
set to 15px multiplied by the index.
**Your code so far**
<style type='text/scss'>
@for $j 1 through 6 {
.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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
Challenge: Use @for
to Create a Sass Loop
Link to the challenge: