Q16: How do CSS Custom Properties (Variables) differ from preprocessor variables (Sass)?
CSS Custom Properties (--var-name) are native runtime DOM variables evaluated live in the browser. They inherit down the cascade, react dynamically to media queries, and can be read/modified using JavaScript. Preprocessor variables (Sass $var) are static and compiled at build time.
Dynamic Theme Custom Properties
:root {
--main-bg: #ffffff;
--text-color: #111111;
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg: #121212;
--text-color: #ffffff;
}
}
body {
background-color: var(--main-bg);
color: var(--text-color);
}💡 Browsers automatically re-evaluate CSS variables when dark mode media queries trigger.
Key Takeaways
- Native CSS variables dynamically inherit and adapt to runtime media query changes.
- Can be read and updated live using JavaScript
setProperty().
Knowledge Check
What happens when a CSS custom property value changes inside a media query rule at runtime?