Generating utility classes with loops in SASS - Performance & Optimization

Performance: Generating utility classes with loops

MEDIUM IMPACT

This affects CSS file size and browser style calculation time, impacting page load and rendering speed.

Creating multiple margin utility classes for spacing

SASS

@for $i from 1 through 10 {
  .m-#{$i} {
    margin: #{$i}rem;
  }
}

Generates fewer classes with rem units for better scalability and smaller CSS size.

📈 Performance GainSaves ~90% CSS size; reduces style calculation time and improves LCP.

Creating multiple margin utility classes for spacing

SASS

@for $i from 1 through 1000 {
  .m-#{$i} {
    margin: #{$i}px;
  }
}

Generates 1000 classes, bloating CSS and increasing style calculation time.

📉 Performance CostAdds ~50-100kb to CSS bundle; increases style calculation time significantly.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Generating 1000 utility classes with px units	No extra DOM nodes	No reflows triggered by CSS alone	High paint cost due to large CSS and style calculation	[X] Bad
Generating 10 utility classes with rem units	No extra DOM nodes	No reflows triggered by CSS alone	Low paint cost due to small CSS and fast style calculation	[OK] Good

Rendering Pipeline

The generated CSS classes are parsed during style calculation. Larger CSS files increase style calculation and layout time, delaying paint.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation

Core Web Vital Affected

LCP

This affects CSS file size and browser style calculation time, impacting page load and rendering speed.

Optimization Tips

1Limit the number of utility classes generated in loops to reduce CSS size.

2Use scalable units like rem instead of px for better performance and responsiveness.

3Avoid generating classes for every single pixel value; use meaningful steps.

Performance Quiz - 3 Questions

What is a main performance risk when generating many utility classes with loops in Sass?

A Large CSS file size increasing style calculation time

B Adding many DOM nodes dynamically

C Increasing JavaScript bundle size

D Triggering multiple reflows on each class

DevTools: Performance

How to check: Record a performance profile while loading the page; look at the 'Style Recalculation' and 'Layout' times.

What to look for: Long style recalculation times or large CSS files indicate performance issues with generated utility classes.

Practice

1. What is the main benefit of using @for loops in Sass when generating utility classes?

easy

A. It automatically adds JavaScript functionality to classes.

B. It creates many classes quickly and keeps styles consistent.

C. It reduces the file size by removing unused CSS.

D. It changes the HTML structure dynamically.

Solution

1. Step 1: Understand the purpose of @for loops in Sass

   The @for loop is used to repeat CSS code multiple times with slight variations, such as different class names.

2. Step 2: Identify the benefit in utility class generation

   Using loops lets you create many utility classes quickly and ensures consistent naming and styling without writing repetitive code.

3. Final Answer:

   It creates many classes quickly and keeps styles consistent. -> Option B

4. Quick Check:

   Loops speed up class creation = B [OK]

Hint: Loops generate many classes fast and consistent [OK]

Common Mistakes:

• Thinking loops add JavaScript behavior
• Believing loops reduce CSS file size automatically
• Confusing loops with HTML structure changes

2. Which of the following is the correct syntax to create utility classes .m-1 to .m-5 using a Sass @for loop?

easy

A. @for $i from 1 through 5 { .m-#{$i} { margin: $i * 1rem; } }

B. @for $i in 1 to 5 { .m-#{$i} { margin: $i * 1rem; } }

C. @for $i = 1; $i <= 5; $i++ { .m-#{$i} { margin: $i * 1rem; } }

D. @loop $i from 1 to 5 { .m-#{$i} { margin: $i * 1rem; } }

Solution

1. Step 1: Recall Sass @for loop syntax

   The correct syntax uses @for $var from start through end or to for exclusive end.

2. Step 2: Identify the correct loop and interpolation

   @for $i from 1 through 5 { .m-#{$i} { margin: $i * 1rem; } } uses from 1 through 5 and interpolates #{$i} correctly in the class name.

3. Final Answer:

   @for $i from 1 through 5 { .m-#{$i} { margin: $i * 1rem; } } -> Option A

4. Quick Check:

   Correct Sass loop syntax = D [OK]

Hint: Use '@for $i from 1 through 5' with #{$i} interpolation [OK]

Common Mistakes:

• Using JavaScript-style loops in Sass
• Wrong keywords like 'in' or 'loop'
• Missing interpolation syntax #{}

3. What CSS classes will be generated by this Sass code?

@for $i from 1 through 3 {
  .p-#{$i} {
    padding: $i * 0.5rem;
  }
}

medium

A. .p-1 { padding: 0.05rem; } .p-2 { padding: 0.1rem; } .p-3 { padding: 0.15rem; }

B. .p-1 { padding: 1rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; }

C. .p-1 { padding: 0.5rem; } .p-2 { padding: 1rem; } .p-3 { padding: 1.5rem; }

D. .p-1 { padding: 0.5px; } .p-2 { padding: 1px; } .p-3 { padding: 1.5px; }

Solution

1. Step 1: Understand the loop range and multiplication

   The loop runs from 1 to 3. Each padding value is $i * 0.5rem.

2. Step 2: Calculate padding for each class

   For i=1, padding = 0.5rem; for i=2, padding = 1rem; for i=3, padding = 1.5rem.

3. Final Answer:

   .p-1 { padding: 0.5rem; } .p-2 { padding: 1rem; } .p-3 { padding: 1.5rem; } -> Option C

4. Quick Check:

   Multiply i by 0.5rem = C [OK]

Hint: Multiply loop index by 0.5rem for padding values [OK]

Common Mistakes:

• Confusing rem with px units
• Multiplying by wrong factor
• Misreading loop range

4. Identify the error in this Sass code that tries to generate width classes .w-1 to .w-4:

@for $i from 1 to 4 {
  .w-#{$i} {
    width: $i * 10px;
  }
}

medium

A. Using 'to' instead of 'through' excludes the last number.

B. Missing interpolation #{} in class name.

C. Multiplying number by px unit directly causes error.

D. Loop variable $i should start from 0.

Solution

1. Step 1: Check the loop range keyword

   The keyword 'to' excludes the last number, so loop runs 1 to 3, not 4.

2. Step 2: Confirm other syntax parts

   Interpolation is correct, and multiplying number by px unit is valid in Sass.

3. Final Answer:

   Using 'to' instead of 'through' excludes the last number. -> Option A

4. Quick Check:

   'to' excludes end number = A [OK]

Hint: Use 'through' to include last number in @for loops [OK]

Common Mistakes:

• Confusing 'to' and 'through' keywords
• Thinking multiplication by px is invalid
• Starting loop at 0 when not needed

5. You want to generate margin utility classes .m-0 to .m-5 but skip .m-3. Which Sass code correctly does this?

hard

A. @for $i from 0 through 5 {
.m-#{$i} {
margin: $i * 0.25rem;
}
}

B. @for $i from 0 through 5 {
@if $i == 3 {
.m-#{$i} {
margin: $i * 0.25rem;
}
}
}

C. @for $i from 0 through 5 {
.m-#{$i} {
margin: $i * 0.25rem;
}
@if $i == 3 {
@continue;
}
}

D. @for $i from 0 through 5 {
@if $i != 3 {
.m-#{$i} {
margin: $i * 0.25rem;
}
}
}

Solution

1. Step 1: Understand the goal to skip .m-3

   We want classes from 0 to 5 but not for 3.

2. Step 2: Check conditional logic in options

   @for $i from 0 through 5 { @if $i != 3 { .m-#{$i} { margin: $i * 0.25rem; } } } uses @if $i != 3 to skip generating .m-3. @for $i from 0 through 5 { @if $i == 3 { .m-#{$i} { margin: $i * 0.25rem; } } } generates only .m-3. @for $i from 0 through 5 { .m-#{$i} { margin: $i * 0.25rem; } @if $i == 3 { @continue; } } tries to use @continue after class creation, which is invalid in Sass. @for $i from 0 through 5 { .m-#{$i} { margin: $i * 0.25rem; } } generates all classes including .m-3.

3. Final Answer:

   @for $i from 0 through 5 { @if $i != 3 { .m-#{$i} { margin: $i * 0.25rem; } } } -> Option D

4. Quick Check:

   Use @if $i != 3 to skip class = A [OK]

Hint: Use @if to exclude unwanted loop values [OK]

Common Mistakes:

• Using @continue incorrectly in Sass
• Generating unwanted classes by missing condition
• Using wrong condition to include only one value