@while loop usage in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a @while loop that runs while $i is less than 4.

SASS

@while $i [1] 4 {
  .item-#{$i} {
    width: 10rem * $i;
  }
  $i: $i + 1;
}

Drag options to blanks, or click blank then click option'

A<

B>

C>=

D<=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' instead of '<' causes the loop to never run.

Using '>=' or '<=' changes the loop condition and may cause extra iterations.

The @while loop runs as long as the condition is true. To run while $i is less than 4, use '<'.

2fill in blank

medium

Complete the code to initialize $i to 1 before the @while loop.

SASS

[1]: 1;
@while $i < 4 {
  .box-#{$i} {
    height: 5rem * $i;
  }
  $i: $i + 1;
}

Drag options to blanks, or click blank then click option'

A$count

B$i

C$num

D$index

Attempts:

3 left

💡 Hint

Common Mistakes

Initializing a different variable than the one used in the loop causes errors.

Not initializing the variable before the loop causes the loop to fail.

The variable $i is used in the loop condition and increment, so it must be initialized before the loop.

3fill in blank

hard

Fix the error in the @while loop condition to run while $count is greater than 0.

SASS

$count: 3;
@while $count [1] 0 {
  .circle-#{$count} {
    border-width: 1px * $count;
  }
  $count: $count - 1;
}

Drag options to blanks, or click blank then click option'

A<

B>=

C<=

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' causes the loop to never run.

Using '>=' or '<=' changes the loop behavior and may cause infinite loops.

To run the loop while $count is greater than 0, use the '>' operator in the condition.

4fill in blank

hard

Fill both blanks to create a @while loop that runs while $num is less than or equal to 5 and increments $num by 1 each time.

SASS

$num: 1;
@while $num [1] 5 {
  .square-#{$num} {
    padding: 2rem * $num;
  }
  $num: $num [2] 1;
}

Drag options to blanks, or click blank then click option'

A<=

B+

C-

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' excludes 5 from the loop.

Using '-' instead of '+' decreases $num and may cause infinite loops.

The loop condition uses '<=' to include 5, and $num is incremented by adding 1 with '+'.

5fill in blank

hard

Fill all three blanks to create a @while loop that runs while $step is less than 4, sets margin to 1rem times $step, and increments $step by 1.

SASS

$step: 1;
@while $step [1] 4 {
  .margin-#{$step} {
    margin: 1rem * [2];
  }
  $step: $step [3] 1;
}

Drag options to blanks, or click blank then click option'

A<

B$step

C+

D<=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<=' runs the loop one extra time.

Using a wrong variable or operator causes errors or infinite loops.

The loop runs while $step is less than 4, margin multiplies 1rem by $step, and $step increments by adding 1.