Skip to content

Variables

Rule

Using CSS variables (custom properties) instead of Sass variables offers several significant advantages:

  • Runtime modification - CSS variables can be changed dynamically with JavaScript during runtime, while Sass variables are compile-time only and can't be altered after compilation.
  • Cascade and inheritance - CSS variables follow the normal CSS cascade and can be overridden in specific contexts ( media queries, child elements, etc.) without recompilation.
  • No build step required - Native CSS variables work without any compilation process, simplifying your development workflow.
  • Browser DevTools access - You can inspect and modify CSS variables directly in browser developer tools, making debugging easier.
  • Context awareness - CSS variables respect the DOM structure and can be scoped to specific components or contexts, unlike Sass variables which are limited to their file scope.
  • Reactive theming - CSS variables enable easier implementation of themes, dark/light modes, and other dynamic style changes without requiring separate compiled stylesheets.
  • Better performance for theming - With CSS variables, theme changes don't require loading new stylesheets, just updating variable values.

CSS variables cannot be used in media queries

Example

🚨 DON’T

$primary-color: #3366ff;

.button {
  background-color: $primary-color;
}

✅ DO

:root {
  --primary-color: #3366ff;
}

.button {
  background-color: var(--primary-color);
}