Theme variables without a preprocessor
Sass and LESS variables compile to static values. Custom properties live in the browser and can change at runtime.
Code Comparison
✕ Old
Preprocessor
1// Sass/LESS: compile-time only
2$primary: #7c3aed;
3$spacing: 16px;
4
5.btn {
6 background: $primary;
7}
// Output is static. Change theme = recompile.
2$primary: #7c3aed;
3$spacing: 16px;
4
5.btn {
6 background: $primary;
7}
// Output is static. Change theme = recompile.
✓ Modern
4 lines
1:root {
2 --primary: #7c3aed;
3 --spacing: 16px;
4}
5.btn { background: var(--primary); }
2 --primary: #7c3aed;
3 --spacing: 16px;
4}
5.btn { background: var(--primary); }
Why the modern way wins
Runtime updates
Change --primary in JS or a class and every use updates. No rebuild.
No build step
Plain CSS. Works in any environment, no Sass or LESS required.
Cascade and override
Set on :root, override in .dark or a component. Inherits like normal CSS.
Browser Support
97%
Lines Saved
N/A
No preprocessor
Old Approach
Sass/LESS vars
Compile to static values
Modern Approach
Custom properties
Update at runtime
How it works
Preprocessor variables like $primary: #7c3aed are replaced at compile time. The output is plain hex. To switch themes you recompile or generate multiple stylesheets.
Custom properties (--primary: #7c3aed) are real CSS. You read and set them with var(--primary). Toggle a class on the root or use JS to change --primary and every reference updates. No build, no duplicate CSS.