Как объявить переменную в CSS?

CSS-переменную объявляют как свойство с двумя дефисами в начале имени, внутри любого селектора.

:root {
  --color-text: #222;
  --radius: 8px;
}

Где объявлять

• `:root` — глобальные переменные для всей страницы (дизайн-токены).
• В компоненте — локальные значения: .card { --card-padding: 16px; }.
• В медиазапросах и темах — переопределение значений:

@media (prefers-color-scheme: dark) {
  :root { --color-text: #eee; }
}

Типизированные переменные

Через @property можно задать тип, начальное значение и наследование — тогда переменную можно анимировать:

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

Правила

• имена чувствительны к регистру: --Color и --color разные;
• значение может быть любым, браузер проверит его только при использовании.

Коротко для собеседования

Объявляют --имя: значение в селекторе (глобально в :root), используют через var(--имя); через @property можно задать тип.

Подробнее: MDN — Использование CSS-переменных