Having issues with this, possible bug?

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:

Hi @devops !

You should be getting an error message in the console because you have a syntax error in your code.

If you need help solving the syntax error, please look at the example code again for the missing keyword.

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

Hope that helps!

I’m not understanding, still… do i need to remove whitespace?

Look carefully, one character at a time comparing these two strings… you are missing 4 very important characters in your code.

I got it now! Thank you

1 Like