@while loop usage in SASS - Performance & Optimization

Performance: @while loop usage

MEDIUM IMPACT

This affects CSS generation time and final CSS file size, impacting page load speed and render time.

Generating repetitive CSS rules with a loop

SASS

.item {
  @for $i from 1 through 100 {
    &-#{$i} {
      width: 10px * $i;
    }
  }
}

Groups selectors under one parent, reducing repetition and improving maintainability.

📈 Performance GainSaves ~2kb in CSS size, reduces parsing time, improves LCP.

Generating repetitive CSS rules with a loop

SASS

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

Generates 100 separate CSS rules, increasing CSS file size and slowing page load.

📉 Performance CostAdds ~5kb to CSS bundle, increases LCP due to larger CSS parsing.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@while loop generating many classes	None (CSS only)	None	High due to large CSS size	[X] Bad
@for loop with grouped selectors	None (CSS only)	None	Lower due to smaller CSS size	[OK] Good

Rendering Pipeline

Sass @while loops run during CSS preprocessing, generating CSS before the browser loads the page. Large loops create bigger CSS files, increasing download and parse time.

→Network

→Style Calculation

⚠️ BottleneckNetwork download and Style Calculation due to large CSS files

Core Web Vital Affected

LCP

This affects CSS generation time and final CSS file size, impacting page load speed and render time.

Optimization Tips

1Avoid generating excessive CSS rules with large @while loops.

2Group selectors to reduce repetition and CSS file size.

3Check CSS file size in DevTools Network panel to monitor impact.

Performance Quiz - 3 Questions

What is a main performance risk of using a large @while loop in Sass?

A Causing many DOM reflows during page interaction

B Generating a very large CSS file that slows page load

C Increasing JavaScript bundle size

D Slowing down server response time

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, and check CSS file size.

What to look for: Large CSS file size indicates heavy loop-generated CSS; smaller files load faster.

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