Glossary

CSS Custom Properties (Variables)

CSS Custom Properties (variables) are values stored in CSS and available to the entire document. Declared with --name, accessed via var(--name). The foundation of design systems and theming.

Syntax

/* Declare in :root — global scope */
:root {
  --color-primary: #c05c08;
  --spacing-md: 16px;
  --radius: 8px;
}

/* Usage */
.btn {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);
}

/* Fallback */
color: var(--text-color, #333);

Dynamic change via JS

document.documentElement.style
  .setProperty('--color-primary', '#0066cc');

Vs Sass/Less variables

Sass/Less variables are compiled at build time — static. CSS custom properties live in the browser — dynamic, inherited through the DOM, changeable by JS and media queries.