I have a problem with Sass: Use @for to Create a Sass Loop

HTML-CSS
1

i have a problem with Sass: Use @for to Create a Sass Loop

the question:
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 10px multiplied by the index.
My answer :(but it dosen’t work)
@for $j from 1 to 6{
.text-#{$j}{font-size: 10px*$j ;}
}

2

Hi @safaBelhaj! Your code looks fine. Is your code in the right place? Remember, all styling has to be in CSS-type file or between <style> tags.

For future reference, please use the “Ask for Help” button in the FCC challenges, as it preformats everything and includes a link to the challenge! It will make helping you a ton easier :slight_smile:

Let me know if this helps, or if you need more help!

1 Like
3

thanks for your help but i am already putting that code between tags but still not working
this is the whole code :

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

Hello

Hello

Hello

Hello

Hello

4

Hi @safaBelhaj will you post your entire code? Be sure to copy and paste it into a code block following 3 backticks (```) and closing it with 3 more backticks.

5

This is my code

  @for $j from 1 through 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>
1 Like
6

You’re missing the top <style> tag. Try adding that and let me know what happens.

7

Dude, it’s not working. I have the same problem.

I tried with 1 through 5, i tried with $i. Maybe it’s something else.

<style type='text/sass'>
  
  @for $j from 1 through 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>
8

still nothing

<style type='text/sass'>
  @for $j from 1 through 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>
9

yess i guess it s something else because i’ve tried almost everything but it s still not working

10

Hi @safaBelhaj I’m going to DM you. Let’s work this out asap so you can move on.

11

Hi…your problem is in your for loop.
“The main difference is that “start to end” excludes the end number, and “start through end” includes the end number.”

12

I.E. use to instead of through as requested in the instructions.

13

Hmmm I do have the to in there and the output shows all of the Hellos increasing in size but it still won’t pass the tests…

<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>

Edit- 2 minutes after posting it passes. A lot of the SASS lessons I’m finding (and there’s been open bug logs on it) you have to mash the RUN TESTS buttons a bunch of times to get it to work correctly.

Here is some more info- further down in the thread someone listed which rebellious lessons causes problems.

14

Here is the full code that worked for me!

<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>
1 Like
15

Not to reopen this old thread but there seems to be another issue with this exercise.

The following solution should work 100%, but strangely the second test does not pass…

<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>

Console output:

// running tests
Your .text-1 class should have a font-size of 10px.
// tests completed

Seems weird that all the other tests pass. I even verified in Chrome Dev Tools that the applied sizing is 10px on the sample markup. Anyone know how to get this test to pass / report an issue to FCC? Thanks!

17

Wow, magic! “Make sure your zoom level is 100%”. Thanks @camperextraordinaire, that was the trick.