Глоссарий

CSS Custom Properties (переменные)

CSS Custom Properties (переменные) — значения, хранящиеся в CSS и доступные всему документу. Объявляются через --название, используются через var(--название). Основа дизайн-систем и тем.

Синтаксис

/* Объявление в :root — глобальная область */
:root {
  --color-primary: #c05c08;
  --spacing-md: 16px;
  --radius: 8px;
}

/* Использование */
.btn {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);
}

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

Динамическое изменение через JS

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

Vs Sass/Less переменные

Sass/Less переменные компилируются на этапе сборки — статические. CSS custom properties живут в браузере — динамические, наследуются по DOM, меняются JS и media queries.