Use @for to Create a Sass Loop

Use @for to Create a Sass Loop
0

#1

Tell us what’s happening:

Your code so far


<style type='text/sass'>
  @for $j from 1 to 6 {
    .text-#{$j} { font-size: 10px * $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/63.0.3239.132 Safari/537.36.

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


#2

Hi teedoot had the same problem - not passing this challenge. I seem to have temporarily solved/passed it by starting to delete spaces inside the last section of the code: {font-size: 10px*$j;}.

Initially I had spaces after 10px and then another space after the multiplication(*) sign. At some point after deleting these two spaces it passed the test, and it passed using the word “through” instead of “to.”

I say temporarily because when I went back and changed to “1 to 6” it seemed to not pass again…put it back to “through” and passed again.

Definately buggy…

Good luck and happy coding.


#3

Hey bluhill … thank u! For some weird reason, still can’t seem to pass it using your tips. Everything else passes except for the (10px*1) …

Not sure how to move forward with this:-(


#4

Hey teedoot can you post your code and can i have a look see? To be completely honest it took refreshing the page a couple of times and going back and forth to finally pass again even with the code that had passed the first time…I even changed from “through” to “to” several times and more refreshes…it’s crazy and dishearting :frowning:


#5

thanks @bluchill … here is the code:

@for $j from 1 through 6 { .text-#{$j} {font-size:10*$j;} }

Hello

Hello

Hello

Hello

Hello


#6

Hi teedot,

try this one: @for $j from 1 to 6 { .text-#{$j} {font-size: 10px*$j;} }

like I said it seems to render correctly with both “to” and “through” but for some reason mine does not pass with “through”. So i just changed that word.


#7

Hi teedot I realised you forgot the word “px”
so try this code:

@for $j from 1 to 6 {
.text-#{$j} {font-size: 10px*$j;}
}

like I said it seems to render correctly with both “to” and “through” but for some reason mine does not pass with “through”.


#8

Hi @teedoot,

This is the solution:

<style type='text/sass'>
  @for $j from 1 through 6 {
    .text-#{$j} {
        font-size: 10px * $j
    }
  }
</style>

Hope this solve your problem, good luck my friend.
If this solution does not work in your browser, try another browser.

Regards,
Ali Mosaad


#9

Thanks for you input but I tried every combination, and still doesn’t work:-(


#10

hey @ali-admin … I run it on firefox, chrome, IE and cleared chache on all cases … still render fail on the first code, (i.e. the 10px * 1) all other work fine.


#11

Hi @teedoot,

Sorry for late, but, i was in pray

Here is full worked solution:

<style type='text/sass'>
  @for $j from 1 through 6 {
    .text-#{$j} {
        font-size: 10px * $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" style="font-size:10px">Hello</p>
<p class="text-2" style="font-size:20px">Hello</p>
<p class="text-3" style="font-size:30px">Hello</p>
<p class="text-4" style="font-size:40px">Hello</p>
<p class="text-5" style="font-size:50px">Hello</p>

just remove every thing and try copy and paste this code, good luck my friend.

Regards,
Ali Mosaad


#12

hey @ali-admin … sorry, my friend:-( … I did, as suggested above and still won’t pass:-( is it possible the pass or fail
verifier might have a bug?


#13

Hi @teedoot,

What is your browser you working on it?


#14

Hi @ali-admin … using chrome


#15

Hi @teedoot,

if you have a team viewer, i can solve your problem online,
here is my email to contact privately: [email protected]

Regards,
Ali Mosaad


#16

Sorry I don’t … I’ll try later from a different computer and browser. I will ping later.


#17

Hi @teedoot,

Great, good luck my friend, if you need any help, i will be in touch with you.

Keep going up and do not desperate.

Regards,
Ali Mosaad


#18

I also had issues with this passing in Chrome, I switched to Firefox and everything passed no problem.


#19

I had the opposite. It wouldn’t pass in firefox but it will in chrome. I managed to fix it in firefox by removing extra spaces.


#20
@for $j from 1 through 6 {
  .text-#{$j}{
    font-size: 10px*$j;
  }
}

this works for me