Mixin libraries pattern in SASS - Performance & Optimization

Performance: Mixin libraries pattern

MEDIUM IMPACT

This pattern affects CSS bundle size and rendering speed by how styles are generated and reused.

Applying reusable styles with mixins in Sass

SASS

.button {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
}

.button1, .button2, .button3 {
  @extend .button;
}

Using a shared class with @extend avoids duplicating CSS rules, reducing file size and improving parsing speed.

📈 Performance GainSingle CSS block reused, reducing CSS size and improving LCP by faster style application.

Applying reusable styles with mixins in Sass

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
}

.button1 {
  @include button-style;
}
.button2 {
  @include button-style;
}
.button3 {
  @include button-style;
}

Each use of the mixin duplicates the CSS properties in the final stylesheet, increasing file size and CSS parsing time.

📉 Performance CostAdds multiple duplicated CSS blocks, increasing CSS file size by ~3x and blocking rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Mixin included multiple times	No extra DOM nodes	No extra reflows	Higher paint cost due to larger CSS	[X] Bad
Shared class with @extend	No extra DOM nodes	No extra reflows	Lower paint cost due to smaller CSS	[OK] Good

Rendering Pipeline

Mixin libraries generate CSS by copying styles where included, increasing CSS size and parsing time. This affects style calculation and layout phases.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to larger CSS and duplicated rules

Core Web Vital Affected

LCP

This pattern affects CSS bundle size and rendering speed by how styles are generated and reused.

Optimization Tips

1Avoid repeating mixins that generate identical CSS blocks multiple times.

2Use shared classes or @extend to reuse styles without duplication.

3Keep CSS file size small to improve style calculation and LCP.

Performance Quiz - 3 Questions

What is a main performance downside of using Sass mixins repeatedly in your CSS?

A It duplicates CSS rules, increasing file size and parsing time.

B It creates extra DOM elements.

C It delays JavaScript execution.

D It causes images to load slower.

DevTools: Performance

How to check: Record a page load and look at the 'Style Recalculation' and 'Layout' events to see if style calculation takes longer than expected.

What to look for: Long style recalculation times and large CSS files in the Network panel indicate inefficient mixin usage.