@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.

Practice

1. What does the @while loop do in Sass?

easy

A. Stops styles from being applied

B. Runs styles only once

C. Creates a list of styles without repeating

D. Repeats styles while a condition is true

Solution

1. Step 1: Understand the purpose of @while loop

   The @while loop repeats code as long as a condition remains true.

2. Step 2: Compare options with the loop behavior

   Only Repeats styles while a condition is true correctly describes repeating styles while a condition is true.

3. Final Answer:

   Repeats styles while a condition is true -> Option D

4. Quick Check:

   @while loops repeat while true [OK]

Hint: Remember: @while repeats until condition is false [OK]

Common Mistakes:

• Thinking it runs only once
• Confusing with static style blocks
• Believing it stops styles immediately

2. Which of the following is the correct syntax for a @while loop in Sass?

easy

A. @while $i < 5 { .box-#{$i} { width: 10px * $i; } }

B. @while ($i < 5) .box-#{$i} { width: 10px * $i; }

C. @while $i < 5: .box-#{$i} { width: 10px * $i; }

D. @while $i <= 5; { .box-#{$i} { width: 10px * $i; } }

Solution

1. Step 1: Check the correct @while syntax

   The correct syntax uses @while condition { ... } without parentheses or semicolons.

2. Step 2: Identify the option matching this syntax

   @while $i < 5 { .box-#{$i} { width: 10px * $i; } } uses @while $i < 5 { ... } which is correct Sass syntax.

3. Final Answer:

   @while $i < 5 { .box-#{$i} { width: 10px * $i; } } -> Option A

4. Quick Check:

   Correct @while syntax uses braces, no parentheses [OK]

Hint: Use braces {} after @while, no parentheses needed [OK]

Common Mistakes:

• Adding parentheses around condition
• Using semicolons after condition
• Missing braces for loop body

3. What will be the output CSS of this Sass code?

$i: 1;
@while $i <= 3 {
  .item-#{$i} {
    width: 10px * $i;
  }
  $i: $i + 1;
}

medium

A. Syntax error due to missing semicolon

B. .item-1 { width: 1; } .item-2 { width: 2; } .item-3 { width: 3; }

C. .item-1 { width: 10px; } .item-2 { width: 20px; } .item-3 { width: 30px; }

D. No output because $i is not incremented

Solution

1. Step 1: Understand the loop iterations

   The loop runs while $i is 1, 2, and 3, incrementing $i each time.

2. Step 2: Calculate the width for each iteration

   Widths are 10px * 1 = 10px, 10px * 2 = 20px, 10px * 3 = 30px, generating three classes.

3. Final Answer:

   .item-1 { width: 10px; } .item-2 { width: 20px; } .item-3 { width: 30px; } -> Option C

4. Quick Check:

   Loop runs 3 times, width multiplies by $i [OK]

Hint: Check loop count and multiply values carefully [OK]

Common Mistakes:

• Forgetting to increment $i
• Confusing units in multiplication
• Assuming syntax error without checking

4. Identify the error in this Sass @while loop:

$i: 1;
@while $i < 4 {
  .box-#{$i} {
    height: 20px * $i;
  }
}

medium

A. Missing increment of $i inside the loop

B. Incorrect loop condition syntax

C. Using multiplication without units

D. Missing braces around loop body

Solution

1. Step 1: Check loop variable update

   The variable $i is never increased inside the loop, causing an infinite loop.

2. Step 2: Confirm other syntax parts

   Loop condition and braces are correct; multiplication with units is valid in Sass.

3. Final Answer:

   Missing increment of $i inside the loop -> Option A

4. Quick Check:

   Loop variable must change to stop loop [OK]

Hint: Always update loop variable inside @while [OK]

Common Mistakes:

• Forgetting to increment loop variable
• Assuming syntax error instead of logic error
• Confusing multiplication units

5. You want to create 4 button styles with increasing padding using @while. Which code correctly achieves this?

$count: 1;
@while $count <= 4 {
  .btn-#{$count} {
    padding: 5px * $count;
  }
  $count: $count + 1;
}

hard

A. Creates only one button style because $count is not incremented

B. Correctly creates .btn-1 to .btn-4 with padding 5px, 10px, 15px, 20px

C. Syntax error due to missing parentheses in condition

D. Creates buttons but padding stays constant at 5px

Solution

1. Step 1: Analyze loop condition and increment

   The loop runs while $count is 1 to 4, incrementing $count each time.

2. Step 2: Check padding calculation and class names

   Each button gets padding 5px times $count, producing 5px, 10px, 15px, and 20px for .btn-1 to .btn-4.

3. Final Answer:

   Correctly creates .btn-1 to .btn-4 with padding 5px, 10px, 15px, 20px -> Option B

4. Quick Check:

   Loop with increment and multiplication works as expected [OK]

Hint: Increment loop variable and multiply padding inside loop [OK]

Common Mistakes:

• Not incrementing loop variable
• Using parentheses incorrectly in Sass @while
• Forgetting to multiply padding by loop variable