Including mixins with @include in SASS - Performance & Optimization

Performance: Including mixins with @include

MEDIUM IMPACT

This affects CSS file size and browser rendering speed by controlling how styles are reused and duplicated.

Reusing common style blocks in CSS

SASS

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

.button-primary {
  @include button-style;
}

.button-secondary {
  @include button-style;
  background-color: gray;
}

Defines the mixin once and includes it where needed, avoiding unnecessary duplication by customizing only what differs.

📈 Performance Gainreduces CSS file size by 30-50%, faster CSS parsing and rendering

Reusing common style blocks in CSS

SASS

@include button-style;
@include button-style;
@include button-style;

This duplicates the same CSS rules multiple times in the final CSS file, increasing file size and slowing down page load.

📉 Performance Costadds 5-10kb per repeated mixin use, increases CSS parsing time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated @include of large mixins	No direct DOM impact	No direct reflows	Higher paint cost due to larger CSS	[X] Bad
Single @include with customization	No direct DOM impact	No direct reflows	Lower paint cost with smaller CSS	[OK] Good

Rendering Pipeline

Sass mixins are compiled to CSS before the browser loads the page. Overusing @include duplicates CSS rules, increasing CSS file size, which delays Style Calculation and Layout stages.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to larger CSS files

Core Web Vital Affected

LCP

This affects CSS file size and browser rendering speed by controlling how styles are reused and duplicated.

Optimization Tips

1Avoid repeating large mixins multiple times to keep CSS size small.

2Use mixins with parameters to customize styles without duplication.

3Prefer utility classes or CSS variables for common styles to reduce CSS bloat.

Performance Quiz - 3 Questions

What is a performance downside of using @include mixins excessively in Sass?

A It increases the CSS file size by duplicating styles

B It slows down JavaScript execution

C It causes more DOM nodes to be created

D It delays image loading

DevTools: Network

How to check: Open DevTools > Network tab > Reload page > Filter by CSS files > Check CSS file size and load time

What to look for: Large CSS files indicate duplicated styles from excessive mixin use; smaller CSS files load faster improving LCP