Use @for to Create a Sass Loop 5

Tell us what’s happening:
Been stuck on this one all night. I’ve tried doing what it says, but I don’t quite understand how to complete this challenge. Like I said, I’m learning this stuff for school, and it’s getting the best of my brain right now. I took a power nap, and I’m back and ready to code again. What am I doing wrong here? I thought I had it correct, but it keeps showing errors.

Your code so far


<style type='text/sass'>
  
@for $j fro 1 to 6 {
  .col-{#j} {width: 100%/12 * $j; }
  }

  .text-1 {
    font-size: 10px;
   }
   .text-2 {
    font-size: 20px;
   }
   .text-3 {
    font-size: 30px;
   }
   .text-4 {
    font-size: 40px;
   }
   .text-5 {
    font-size: 50px;
   }
  }
</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; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 Avast/73.0.1258.87.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/sass/use-for-to-create-a-sass-loop/

Why are you using 100%/12 * $j ?

Also, the challenge told you to write a @for directive, so why are you manually creating the class definitions after the @for directive?

I was following the “Get a hint” sample on a new page.