freeCodeCamp Challenge Guide: Apply a Style Until a Condition is Met with @while

Guide
#1

Apply a Style Until a Condition is Met with @while

Problem Explanation

This program is very simple, the trick is to remember how while looping works.

Hints

Hint 1

  • **Make sure your zoom settings are at 100% or default otherwise tests sometimes fail. **

Hint 2

  • You will initialise the loop first with x as: $x: 1

Hint 3

  • See the example for @while syntax, @while $x < 11

Hint 4

  • to set class properties inside a loop we reference them enclosed by #{}, hence ere it will become: .text-#{$x}

Solutions

Solution 1 (Click to Show/Hide) 
$x: 1;
@while $x < 11 {
  .text-#{$x} { 
    font-size: 15px * $x;
  }
  $x: $x + 1;
}

Relevant Links

3 Likes
#2