Что такое CSS-переменные (custom properties)?

СобеседованиеОсновы CSS

Пользовательские свойства с префиксом --, используемые через var()
Наследуются по DOM-дереву, можно переопределять в дочерних элементах
В отличие от переменных препроцессоров (Sass), работают в runtime и реагируют на изменения

:root {
  --color-primary: #3b82f6;
  --spacing: 1rem;
}
.button {
  background: var(--color-primary);
  padding: var(--spacing, 0.5rem); /* 0.5rem — fallback */
}