What is the difference between CSS variables and Sass variables?

CSS custom properties are live values that cascade and can be changed at runtime with JavaScript. Sass variables are compiled away at build time and cannot be changed dynamically.

How do I use a CSS custom property?

Reference it with the var() function: color: var(--color-primary). You can also provide a fallback: color: var(--color-primary, blue).

Can I define different values for dark mode?

Yes. Use a @media (prefers-color-scheme: dark) block to redefine the same custom properties with dark-mode values. All elements using those variables update automatically.

Format a CSS Custom Properties File

CSS custom properties (variables) defined on :root create a design token system that any stylesheet can consume. This example defines a full color palette, type scale, spacing scale, and border radius values. Formatting the variables file makes it easy to see all tokens at a glance and maintain consistency across a large codebase. Keep this as a single source of truth for your design system.

Example

:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-danger: #ef4444;
  --color-success: #22c55e;
  --color-bg: #ffffff;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
}

[ open in CSS Formatter → ]

FAQ

What is the difference between CSS variables and Sass variables?: CSS custom properties are live values that cascade and can be changed at runtime with JavaScript. Sass variables are compiled away at build time and cannot be changed dynamically.
How do I use a CSS custom property?: Reference it with the var() function: color: var(--color-primary). You can also provide a fallback: color: var(--color-primary, blue).
Can I define different values for dark mode?: Yes. Use a @media (prefers-color-scheme: dark) block to redefine the same custom properties with dark-mode values. All elements using those variables update automatically.

Related Examples

Format a CSS Reset Stylesheet

A CSS reset removes browser default styles so your own styles apply consistently...

Format CSS Media Queries

Mobile-first media queries start with styles for small screens and layer on addi...

Format an HTML Flexbox Layout

Flexbox is the standard layout model for one-dimensional UI components like navi...