Function definition with @function in SASS - Performance & Optimization

Performance: Function definition with @function

LOW IMPACT

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

Reusing color calculations in multiple places

SASS

@function color-shade($color, $percent) {
  @return lighten($color, $percent);
}

.element1 {
  color: color-shade(#333, 20%);
}
.element2 {
  color: color-shade(#333, 20%);
}

Functions return values without duplicating CSS, reducing final CSS size.

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

Reusing color calculations in multiple places

SASS

@mixin color-shade($color, $percent) {
  color: lighten($color, $percent);
}

.element1 {
  @include color-shade(#333, 20%);
}
.element2 {
  @include color-shade(#333, 20%);
}

Mixins duplicate CSS rules each time they are included, increasing final CSS size.

📉 Performance CostAdds extra CSS bytes and increases LCP due to larger file size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using @mixin for repeated styles	No direct DOM impact	No reflows	Larger CSS causes slower paint	[X] Bad
Using @function to return values	No direct DOM impact	No reflows	Smaller CSS improves paint speed	[OK] Good

Rendering Pipeline

Sass functions run during CSS compilation, affecting the size and complexity of the generated CSS, which impacts browser style calculation and paint.

→CSS Compilation

→Style Calculation

→Paint

⚠️ BottleneckCSS Compilation time and final CSS file size

Core Web Vital Affected

LCP

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

Optimization Tips

1Use @function to compute and return values without duplicating CSS.

2Avoid using @mixin for repeated styles that only change values; prefer functions.

3Smaller CSS files improve page load speed and reduce Largest Contentful Paint.

Performance Quiz - 3 Questions

How does using @function in Sass affect the final CSS file size?

A It reduces CSS duplication, making the file smaller

B It increases CSS duplication, making the file larger

C It has no effect on CSS file size

D It removes all CSS comments

DevTools: Network

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

What to look for: Smaller CSS file size and faster CSS load time indicate better performance from using @function.