Need assistance in Use for to Create a Sass Loop

HTML-CSS
1

Challenge Name

Use for to Create a Sass Loop has an issue.

Issue Description

Browser Information

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0.

Also tested it on my Chrome Browser as well, same problem

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36.

Screenshot

Your Code



<style>
  @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>
2

Hi @Sluthsaber95,

If you look at the documentation about Sass Directives, the @for loop works with through and not to:

@for $i from 1 through 6 {
  [...]
}

Best regards,
Anthodpnt

3

Hi sluth 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.

1 Like
4

In Chrome 67.0.3396.87 I cannot pass this challenge… But in Firefox Quantum 61.0 the same code is working…

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

To pass this test in your brackets you need:

  1. Add space before your property
  2. Add space before value of this property
  3. Delete space after value of this property
  4. Add space after multiplication operator
  5. Add space after semicolon

Example:

.selector { property: value* $variable; }