freeCodeCamp: Beta - Test Case Broken - Sass: Use @for to Create a Sass Loop

Challenge Name

http://beta.freecodecamp.com/en/challenges/sass/use-for-to-create-a-sass-loop?

Issue Description

The test case for this challenge is broken.

SASS does not appear to be working for the in browser editor, as hitting submit doesn’t properly show the SASS changes.

Using an editor like codepen that has sass configured will show that the code does what is instructed.

FCC says it fails these tests, but the code is correct, FCC is wrong. Your .text-1 class should have a font-size of 10px. Your .text-2 class should have a font-size of 20px. Your .text-3 class should have a font-size of 30px. Your .text-4 class should have a font-size of 40px. Your .text-5 class should have a font-size of 50px.

Browser Information

Browser Name, Version: Chrome
Operating System: Windows 10
Mobile, Desktop, or Tablet: Desktop

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>

Screenshot

fcc

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 31 (6 by maintainers)

Most upvoted comments

This is working 100%`

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

shtscompany on Dec 6, 2018

nurulilmaan on Aug 9, 2018

@QuincyLarson Actually, there’s a chance that this (along with a ton of other closed Sass issues) are related to https://github.com/freeCodeCamp/freeCodeCamp/issues/17570

It might be a platform issue, not a test case issue.

P1xt on Jun 14, 2018

Ok guys, I tried on first and this challenge also and it worked. What you need to do is to manually (hardcode) given parameters in classes. Example: else than using for loop,if you want to pass the test do following: <p class="text-1" style="font-size:10px;">Hello</p> Hello This is passing 100%.

zlayabekrija on Jun 11, 2018

<style type='text/sass'>

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

I’ve already tried a lot of other variations as well.

danchann on Jun 3, 2018

Having the same problem, it won’t pass even with bluchill’s suggestions.

danchann on Jun 3, 2018

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

bluchill on Jun 1, 2018