Functions with parameters in SASS - Performance & Optimization

Performance: Functions with parameters

LOW IMPACT

This affects the CSS generation time and the final CSS file size, impacting page load speed.

Reusing color values with slight variations

SASS

@function shade-color($color, $percent) {
  @return mix(black, $color, $percent / 100);
}

$primary-color: #3498db;

.button {
  background-color: $primary-color;
}
.alert {
  background-color: shade-color($primary-color, 20);
}

Using a function with parameters generates colors dynamically, reducing repeated code.

📈 Performance GainSaves CSS bytes, reducing file size and improving load speed.

Reusing color values with slight variations

SASS

$primary-color: #3498db;

.button {
  background-color: #3498db;
}
.alert {
  background-color: #2980b9;
}

Hardcoding similar colors multiple times causes repeated CSS rules and larger file size.

📉 Performance CostAdds unnecessary CSS bytes, increasing download size and slowing LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Hardcoded repeated colors	No impact	No impact	No impact	[X] Bad
Parameterized functions for colors	No impact	No impact	No impact	[OK] Good

Rendering Pipeline

Sass functions with parameters run at build time, generating CSS before the browser loads the page.

→CSS Generation

→Network Transfer

→Style Calculation

⚠️ BottleneckNetwork Transfer due to CSS file size

Core Web Vital Affected

LCP

This affects the CSS generation time and the final CSS file size, impacting page load speed.

Optimization Tips

1Use parameterized functions to avoid repeating similar CSS values.

2Functions run at build time, so they don't affect runtime performance.

3Smaller CSS files load faster, improving page load speed and LCP.

Performance Quiz - 3 Questions

How do Sass functions with parameters affect CSS file size?

A They have no effect on file size

B They increase file size by adding extra code

C They reduce file size by avoiding repeated code

D They cause the browser to reflow more often

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and check CSS file size.

What to look for: Smaller CSS file size indicates better performance from using functions with parameters.