CSS custom properties vs SASS variables - Performance Comparison

Performance: CSS custom properties vs SASS variables

MEDIUM IMPACT

This concept affects how CSS values are processed and updated in the browser, impacting rendering speed and dynamic style changes.

Using variables for theming colors in styles

SASS

:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

// Can change --primary-color dynamically with JavaScript without reload

CSS custom properties are handled by the browser at runtime, allowing dynamic updates without recompiling or reloading.

📈 Performance GainNo reflow on variable change if used in paint-only properties; enables smooth theme switching

Using variables for theming colors in styles

SASS

$primary-color: #3498db;
.button {
  background-color: $primary-color;
}

// To change color dynamically, need to recompile CSS

SASS variables are replaced during build, so changing them requires recompiling CSS and reloading the page.

📉 Performance CostBlocks rendering until CSS is loaded; no runtime flexibility

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
SASS variables (static)	None at runtime	0	Minimal	[OK] Good for static styles
CSS custom properties (dynamic)	None unless JS changes styles	0-1 per change	Low if used for paint-only properties	[!] OK with dynamic updates

Rendering Pipeline

SASS variables are replaced during CSS preprocessing, so the browser only sees static CSS. CSS custom properties are parsed and stored by the browser, allowing runtime updates that can trigger style recalculation and repaint.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckStyle Calculation when custom properties change dynamically

Core Web Vital Affected

CLS

This concept affects how CSS values are processed and updated in the browser, impacting rendering speed and dynamic style changes.

Optimization Tips

1Use SASS variables for static values to avoid runtime overhead.

2Use CSS custom properties for values that need to change dynamically in the browser.

3Avoid changing custom properties that affect layout to minimize reflows.

Performance Quiz - 3 Questions

Which variable type allows changing styles dynamically in the browser without recompiling CSS?

A Both require recompiling

B CSS custom properties

C SASS variables

D Neither can change dynamically

DevTools: Performance

How to check: Record a performance profile while toggling CSS custom properties via JavaScript; observe style recalculation and paint events.

What to look for: Look for style recalculation and paint times; minimal layout thrashing indicates good use of custom properties.