Use @for to Create a Sass Loop Tests Fail

HTML-CSS
1

Tell us what’s happening:
Still facing some problems with the SASS part, in addition to the challenge
https://learn.freecodecamp.org/front-end-libraries/sass/store-data-with-sass-variables which doesn’t pass. as you can see from the code and the image, the CSS classes are created successfully, however the tests fail.

bug
bug1426×676 109 KB

Your code so far


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

Link to the challenge:

2

The challenge asks to use a variable $j. Maybe that’s why it’s failing.

1 Like
3

Thank you for your reply, but I’ve tried it, it doesn’t passe

4

Have you tried through instead of to?

5

Yeah, i’ve tried that , and changed space between words, and joining lines, in all possible combinations, i think it’s a bug, because i faced the same problem with the first challenge and i had to skip it

6

i cleared the browser cache, used the incognito mode, used firefox instead of chrome, but no luck

7

Try this (without the spaces):

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

And click on test your code several times. It’s an old bug still to be fixed.

1 Like
8

i’ve tried that too after searching on github issues, well i think there is nothing to do until the bug is solved, i passed this challenge by cheating : style="font-size: x0px;" :sweat_smile:

9

Lol. The challenge is more that passed. Not your fault that the tests are buggy :slight_smile: