Sass: Use @for to Create a Sass Loop- Answer Correct but no test case passing

html
<style type='text/sass'>

@for $j from 1 through 5 {
  .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/79.0.3945.88 Safari/537.36.

Challenge: Use @for to Create a Sass Loop

Link to the challenge:

Can you tell us what browser you are using?

Hi, My browser is Chrome.

Google Chrome

Version 79.0.3945.88 (official version) (64-bit)

Make sure your zoom level is at 100%.

I sure. Because other problems can be passed。

I need you to open the browser console (Ctrl+Shft+J) and use the Inspector tool to select the preview pane. Once selected, go the the Console tab and clear it. Finally, copy/paste the following into the console and press Enter to see the result.

$('.text-1').css('font-size')

See below for the process. Take a screenshot of the result.

$('.text-1').css('font-size') . 

Console prints to 12px, That is why it failed.

What should I do to make the console print out 10px

I see you are in China, so maybe the following is why.

https://bugs.chromium.org/p/chromium/issues/detail?id=36429

You may need to go to Chrome Settings >> Appearance >> Minimum font-size and set it to be 10px.

I can’t change it

I try to do it, thanks, brother

See my last reply. It maybe something specific to your locale and Chrome.

It is crazy. You’re right. I set it up. I haven’t encountered such problems before. You helped me a lot.

Unfortunately, Chrome has been making changes lately that give the end user to much control over how the site displays.

Thank you for taking the time to answer me. Have a nice day

Because others in China may have this same problem, I have create a pull request to change the challenge instructions and tests to start at a font-size of 15px. This should help further.

This is really a good idea。Can help more people in the future

Just set it up. Then refresh the page. You can pass this question.

Hi @RandellDawson ,

My Google Chrome browser is set to 100% zoom and my font-size is set to 10px, but I still can’t get the challenge to pass to mark as completed. :frowning_face:

Below is a screenshot of me following the instructions you gave Troylrvo, but it didn’t work for me. I even tried to switch to Mozilla FireFox after Chrome didn’t work.

The solution on the Hint page is not working: freeCodeCamp Challenge Guide: Use @for to Create a Sass Loop

:woman_shrugging:t6: I don’t know what to do at this point.

please create a topic for your question using the Get Help->Ask for help button so that your code is included (instead of a screenshot)

The solution code in the hints is wrong, you can’t just copy and paste it.

  1. The type needs to be scss not sass.

type='text/scss'

  1. The starting font size should be 15px not 10px.

Edit: I updated the solution code.

1 Like