Extending vs mixing comparison in SASS - Performance Comparison

Performance: Extending vs mixing comparison

MEDIUM IMPACT

This affects CSS file size and browser rendering speed by changing how styles are reused and combined.

Reusing button styles across multiple classes

SASS

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

.primary-button {
  @extend %button-style;
}
.secondary-button {
  @extend %button-style;
  background-color: gray;
}

Using @extend shares the same CSS rules for both classes, reducing CSS size and improving load speed.

📈 Performance GainSingle CSS rule reused, reducing file size and improving LCP.

Reusing button styles across multiple classes

SASS

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

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

Using @mixin duplicates the button styles in the CSS for each class, increasing file size and CSS parsing time.

📉 Performance CostAdds duplicated CSS rules, increasing CSS file size and blocking rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@mixin reuse	No change	No change	Higher due to larger CSS	[!] OK
@extend reuse	No change	No change	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

Sass @extend merges selectors into one CSS rule, reducing CSS size and style recalculations. @mixin duplicates styles, increasing CSS size and parsing time.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to larger CSS from duplicated mixins

Core Web Vital Affected

LCP

This affects CSS file size and browser rendering speed by changing how styles are reused and combined.

Optimization Tips

1Use @extend to share styles and reduce CSS size when selectors are simple.

2Avoid @extend with complex selectors to prevent slow style calculations.

3Use @mixin for isolated reusable styles even if it increases CSS size slightly.

Performance Quiz - 3 Questions

Which Sass feature generally produces smaller CSS files when reusing styles?

A Both produce the same size

B @mixin

C @extend

D Neither affects CSS size

DevTools: Network

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

What to look for: Smaller CSS file size indicates better performance with @extend; larger size indicates duplicated styles from @mixin.