@while loop usage in SASS - Browser Rendering Trace

Render Flow - @while loop usage

[Read @while loop] -> [Check condition] -> [If true: execute block] -> [Update variables] -> [Repeat check] -> [If false: exit loop]

The browser reads the @while loop in Sass, checks the condition, runs the code inside if true, updates variables, and repeats until the condition is false.

Render Steps - 4 Steps

Code Added:$i: 1;

Before

[ ] (empty .boxes container)

→

After

[ ] (still empty, no boxes yet)

Variable $i is set to 1, but no boxes are created yet.

🔧 Browser Action:Stores variable $i in Sass memory.

Code Sample

Creates three colored boxes with increasing widths using a Sass @while loop.

SASS

<div class="boxes"></div>

SASS

$i: 1;
@while $i <= 3 {
  .boxes {
    & > div:nth-child(#{$i}) {
      width: 5rem * $i;
      height: 5rem;
      background-color: hsl(200, 70%, 50%);
      margin: 0.5rem;
      display: inline-block;
    }
  }
  $i: $i + 1;
}

Render Quiz - 3 Questions

After the first iteration in render_step 2, what do you see inside the .boxes container?

A One box with width 5rem

B Three boxes with increasing widths

C No boxes at all

D One box with width 15rem

Common Confusions - 2 Topics

Why don't I see any boxes if I forget to increment $i?

Without incrementing $i, the condition $i <= 3 stays true forever, causing an infinite loop in Sass compilation, so no CSS is generated.

💡 Always increase your loop counter inside @while to end the loop.

Why does nth-child(#{$i}) work inside the loop?

Sass replaces #{$i} with the current value of $i, so nth-child(1), nth-child(2), etc. are generated, targeting different elements.

💡 Use #{} to insert variables into selectors dynamically.

Property Reference

Sass @while loop part	Description	Effect in CSS output	Common Use
$i: 1;	Initialize counter variable	No direct CSS output	Start counting in loop
@while $i <= 3 { ... }	Loop runs while condition true	Generates repeated CSS blocks	Create repetitive styles
$i: $i + 1;	Increment counter	Moves loop towards end	Avoid infinite loops
.boxes > div:nth-child(#{$i})	Selects nth child dynamically	Targets specific elements	Style multiple elements differently

Concept Snapshot

@while loop runs code while a condition is true. Initialize a counter variable before the loop. Inside the loop, write styles using the counter. Increment the counter to avoid infinite loops. Use #{} to insert variables into selectors. Great for repetitive, patterned CSS generation.

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