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

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

#1

Describe your problem and how to reproduce it:

Google Chrome:

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

Safari:

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;
    }
  
</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>
<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>

#2

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.


#3

Thanks.

Code still doesn’t work. :sweat_smile:


#4

image