CSS custom properties vs SASS variables - Browser Rendering Compared

Render Flow - CSS custom properties vs SASS variables

Write SASS variables

→SASS compiler replaces variables

↓

Write CSS custom properties

→Browser reads CSS

SASS variables are replaced during compilation before the browser sees the CSS. CSS custom properties stay in the CSS and the browser applies them dynamically when rendering.

Render Steps - 3 Steps

Code Added:$bg-color: #ecf0f1;

Before

[box]
Text: default color
Background: default

→

After

[box]
Text: default color
Background: light gray (#ecf0f1)

SASS variable $bg-color sets the background color during compilation, so the box background becomes light gray.

🔧 Browser Action:SASS compiler replaces $bg-color with #ecf0f1 in CSS before browser renders

Code Sample

A box with text colored by a CSS custom property and background colored by a SASS variable.

SASS

<div class="box">Hello</div>

SASS

$bg-color: #ecf0f1;

:root {
  --main-color: #3498db;
}

.box {
  color: var(--main-color);
  background-color: $bg-color;
}

Render Quiz - 3 Questions

After step 3, what color is the box text?

A Default black

B Blue (#3498db)

C Light gray (#ecf0f1)

D Transparent

Common Confusions - 2 Topics

Why can't I change a SASS variable in the browser?

SASS variables are replaced during compilation, so the browser never sees them. Only CSS custom properties exist in the final CSS and can be changed dynamically.

💡 Remember: SASS variables = compile time, CSS custom properties = runtime (render_steps 1 and 3)

Why does var(--main-color) work in CSS but $main-color does not?

$main-color is a SASS variable and only works in SASS files before compilation. var(--main-color) is CSS syntax for custom properties that the browser understands.

💡 Use $ for SASS variables in SASS code, var() for CSS custom properties in CSS (render_steps 2 and 3)

Property Reference

Feature	SASS Variable	CSS Custom Property
Definition	Preprocessor variable replaced at compile time	CSS variable applied at runtime by browser
Syntax	$variable-name: value;	--variable-name: value;
Scope	Global or local in SASS files	Cascades like normal CSS properties
Dynamic changes	No, fixed after compilation	Yes, can change with JS or media queries
Browser support	N/A (compiled away)	Supported by modern browsers
Use case	Reusable values in SASS code	Theming and runtime style changes

Concept Snapshot

SASS variables use $ and are replaced during compilation. CSS custom properties use -- and exist in the CSS for the browser. SASS variables cannot change at runtime; CSS custom properties can. Use SASS variables for static values, CSS custom properties for dynamic theming. CSS custom properties cascade and can be accessed with var().