Master CSS Variables (Custom Properties) in 5 Minutes: Stop Using SASS for Theming

Master CSS Variables (Custom Properties) in 5 Minutes

For years, we relied on SASS and LESS to give us variables. But in 2026, native CSS Custom Properties are superior because they can do something preprocessors never could: Change in real-time.

If you are still compiling your CSS just to change a hex code, you are working too hard. Native CSS Variables (officially called Custom Properties) have been supported in all modern browsers for years, yet many developers still treat them like second-class citizens.

They are not just "variables." They are a communication channel between your CSS, your HTML structure, and your JavaScript. They allow your design system to be aware of the DOM.

The Syntax: Define a variable with two dashes: --my-color: red;. Use it with the `var()` function: color: var(--my-color);.

Why Not Just Use SASS Variables?

SASS variables ($color: red;) are compiled away. Once the browser sees the CSS file, the variable is gone. It is just a static value.

CSS Variables live in the browser. This means:

• You can change them with JavaScript instantly.
• You can change them based on Media Queries (Dark Mode).
• They follow the rules of the "Cascade" (Scoping).

Step 1: Define Global Variables

We usually define global variables in the :root pseudo-class. This makes them available everywhere in the document.

:root { --primary-color: #3498db; --text-color: #333333; --spacing-unit: 16px; } body { color: var(--text-color); padding: var(--spacing-unit); }

Step 2: The "Killer App" (Instant Dark Mode)

This is where CSS Variables destroy SASS. To implement Dark Mode with SASS, you often need to load a completely separate stylesheet or add a class to the body that overrides everything.

With CSS Variables, you just change the value of the variable inside a media query. The browser repaints the page instantly.

/* Default (Light) */ :root { --bg-color: #ffffff; --text-color: #000000; } /* Dark Mode Override */ @media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a1a; --text-color: #ffffff; } } body { background-color: var(--bg-color); color: var(--text-color); }

You didn't write any new CSS rules for the body. You just swapped the "definition" of the colors.

Step 3: Local Scoping

Variables respect the DOM structure. You can redefine a variable inside a specific component, and it will only affect that component's children.

.card { --card-padding: 20px; padding: var(--card-padding); } .card.compact { --card-padding: 10px; /* The padding rule above automatically updates for this card */ }

SASS vs. Native CSS: The Verdict

Feature	SASS Variables ($)	CSS Custom Properties (--)
Where it lives	Compiler (Dev machine)	Browser (User machine)
Dynamic Updates	No (Static)	Yes (JS / Media Queries)
Scoping	Block scope (compile time)	DOM Cascade scope
Browser Support	N/A (Compiles to CSS)	100% Modern Browsers

Conclusion

CSS Variables are the backbone of modern responsive design. They allow you to build themes, handle accessibility settings, and manage design systems with a fraction of the code required by preprocessors.

Stop compiling colors. Let the browser do the work.

Download January Skills: CSS Variable Theme Template