Why custom functions are useful in SASS - Performance Evidence

Performance: Why custom functions are useful

MEDIUM IMPACT

Custom functions in Sass affect CSS generation speed and final CSS size, impacting page load and render time.

Reusing color calculations or spacing values in styles

SASS

@function lighten-primary($amount) {
  @return lighten(#3498db, $amount);
}

.button {
  background-color: lighten-primary(10%);
}
.card {
  background-color: lighten-primary(10%);
}

Encapsulates the calculation once, reuses it, reducing duplication and improving maintainability.

📈 Performance GainSmaller CSS output and faster Sass compilation.

Reusing color calculations or spacing values in styles

SASS

$primary-color: #3498db;

.button {
  background-color: lighten($primary-color, 10%);
}
.card {
  background-color: lighten($primary-color, 10%);
}

Repeating the same calculation multiple times causes Sass to do redundant work and generates repeated CSS values.

📉 Performance CostIncreases CSS file size and slows Sass compilation slightly.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated calculations inline	N/A	N/A	Larger CSS size increases paint time	[X] Bad
Custom function reuse	N/A	N/A	Smaller CSS size reduces paint time	[OK] Good

Rendering Pipeline

Custom functions run during Sass compilation before CSS is sent to the browser, affecting the size and complexity of the CSS that the browser processes.

→CSS Generation

→Network Transfer

→Style Calculation

⚠️ BottleneckCSS Generation time and CSS file size affect network and style calculation speed.

Core Web Vital Affected

LCP

Custom functions in Sass affect CSS generation speed and final CSS size, impacting page load and render time.

Optimization Tips

1Use custom functions to avoid repeating the same calculations in Sass.

2Smaller CSS files load faster and improve page rendering speed.

3Faster Sass compilation helps during development but mainly affects build time.

Performance Quiz - 3 Questions

How do custom functions in Sass improve performance?

A By increasing the number of DOM nodes

B By reducing CSS duplication and file size

C By adding JavaScript to the page

D By delaying CSS loading

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 files load faster, improving Largest Contentful Paint (LCP).