Mixin definition with @mixin in SASS - Performance & Optimization

Performance: Mixin definition with @mixin

MEDIUM IMPACT

This affects CSS generation size and browser rendering by reusing style blocks efficiently.

Reusing common style blocks across multiple selectors

SASS

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

button {
  @include blue-box;
}
.card {
  @include blue-box;
}

Reuses styles via mixin, reducing CSS duplication and file size.

📈 Performance GainSaves CSS bytes, improves LCP by faster CSS download and parse.

Reusing common style blocks across multiple selectors

SASS

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

Repeating the same styles increases CSS file size and parsing time.

📉 Performance CostAdds unnecessary CSS bytes, increasing download and parse time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated styles without mixin	No change	No change	Higher due to larger CSS	[X] Bad
Styles reused with @mixin	No change	No change	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

The browser downloads the CSS file generated from Sass. Smaller CSS files from mixin reuse reduce download and parsing time. Once parsed, styles are applied during Style Calculation and Layout stages.

→CSS Download

→Style Calculation

→Layout

⚠️ BottleneckCSS Download and Parsing

Core Web Vital Affected

LCP

This affects CSS generation size and browser rendering by reusing style blocks efficiently.

Optimization Tips

1Use @mixin to avoid repeating CSS code and reduce file size.

2Smaller CSS files improve Largest Contentful Paint (LCP) by loading faster.

3Avoid duplicating styles to keep CSS parsing efficient.

Performance Quiz - 3 Questions

How does using @mixin in Sass affect CSS file size?

A It reduces CSS file size by reusing style blocks.

B It increases CSS file size by duplicating styles.

C It has no effect on CSS file size.

D It removes all CSS styles.

DevTools: Network

How to check: Open DevTools > Network tab > Reload page > Filter by CSS files > Check file size of CSS output.

What to look for: Smaller CSS file size indicates efficient reuse with mixins; large files suggest duplication.