Глосарій

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.