Default parameter values in SASS - Performance & Optimization

Performance: Default parameter values

LOW IMPACT

This affects CSS compilation time and the final CSS bundle size, impacting page load speed.

Defining reusable mixins with optional parameters

SASS

@mixin button($color: black) {
  background-color: $color;
}

.button-primary {
  @include button(red);
}

.button-secondary {
  @include button(blue);
}

.button-default {
  @include button();
}

Default parameter allows skipping the argument when the default is desired, reducing code repetition.

📈 Performance GainSmaller CSS bundle size, faster parsing and loading.

Defining reusable mixins with optional parameters

SASS

@mixin button($color) {
  background-color: $color;
}

.button-primary {
  @include button(red);
}

.button-secondary {
  @include button(blue);
}

.button-default {
  @include button(black);
}

Forcing the caller to always specify a color leads to repetitive code and potential duplication in compiled CSS.

📉 Performance CostIncreases CSS bundle size by repeating similar rules with different values.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No default parameters, repeated mixin calls with arguments	N/A	N/A	Larger CSS causes slower style calculation	[X] Bad
Default parameters used to avoid repetition	N/A	N/A	Smaller CSS improves style calculation speed	[OK] Good

Rendering Pipeline

Default parameter values are resolved during Sass compilation, so they affect the CSS file size and complexity before the browser renders the page.

→CSS Compilation

→Network Transfer

→Style Calculation

⚠️ BottleneckNetwork Transfer due to larger CSS files

Core Web Vital Affected

LCP

This affects CSS compilation time and the final CSS bundle size, impacting page load speed.

Optimization Tips

1Use default parameter values to avoid repeating similar CSS rules.

2Smaller CSS files load faster and improve Largest Contentful Paint (LCP).

3Avoid forcing all mixin arguments if sensible defaults exist.

Performance Quiz - 3 Questions

How do default parameter values in Sass mixins affect CSS bundle size?

A They increase bundle size by adding extra code.

B They reduce bundle size by avoiding repeated code.

C They have no effect on bundle size.

D They cause the browser to reflow more often.

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by CSS files, and compare file sizes with and without default parameters.

What to look for: Smaller CSS file size indicates better performance due to less redundant code.