Help needed on Sass: Apply a Style Until a Condition is Met with @while

Describe your problem and how to reproduce it:

Google Chrome:

Your .text-1 class should have a font-size of 5px


Your .text-1 class should have a font-size of 5px.
Your .text-2 class should have a font-size of 10px.

Tell us about your browser and operating system:

  • Browser Name: Safari / Google Chrome
  • Browser Version: Version 12.0.2 (14606.3.4) / Version 71.0.3578.98
  • Operating System: macOS 10.14.2 / macOS 10.14.2
<style type='text/sass'>
  $x: 1;
  @while $x < 11 {
    .text-#{$x} { font-size: 5px * $x;}
    $x : $x + 1;

<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>
<p class="text-6">Hello</p>
<p class="text-7">Hello</p>
<p class="text-8">Hello</p>
<p class="text-9">Hello</p>
<p class="text-10">Hello</p>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.



Code still doesn’t work. :sweat_smile:


Some bug seems to change the
text-1 class font-size to 6px.

I read on that the bug was fixed in source code but not pushed out yet.
Why not?

When can the issue be fixed?

The issue will be fixed once the new version of the curriculum is pushed to production. It is going through Q&A right now as far as I know. ETA still unknown. (There was a big change in how a few things are managed and it is causing delays while smoothing our everything)

The issue on my machine was the default font size was set to something else, not the default.