Что такое CSS переменные и зачем их использовать

Что проверяют

Отличаете ли вы кастомные свойства от переменных Sass и понимаете ли, что они живут в каскаде во время работы страницы. Следом обычно спрашивают, как сделать на них тёмную тему и почему переменная не работает в @media.

Как отвечать

Кастомное свойство объявляется как --brand: #3366ff и читается через var(--brand), вторым аргументом задаётся запасное значение: var(--gap, 16px). Главное про них:

• каскад и наследование: переменная наследуется потомками и переопределяется на любом уровне. Объявили на :root, переопределили в .card или в [data-theme="dark"], и все вложенные элементы подхватили новое значение;
• работают в рантайме: Sass-переменная подставляется при сборке и исчезает, кастомное свойство остаётся в браузере. Его можно поменять в медиазапросе, на :hover или из JS через el.style.setProperty('--brand', '#e33'), а прочитать через getComputedStyle(el).getPropertyValue('--brand');
• темизация и компоненты: дизайн-токены (цвета, отступы, радиусы) лежат на :root, а компонент выставляет наружу свои переменные как API для настройки;
• @property: регистрирует переменную с типом, начальным значением и флагом наследования. После этого её можно анимировать, например плавно менять угол градиента. Поддерживается всеми основными браузерами с 2024 года.

Стоит упомянуть и единицы: значение подставляется как набор токенов, поэтому число без единицы переводят через calc(var(--n) * 1px).

Где спотыкаются

Пишут @media (max-width: var(--bp)). В условии медиазапроса переменные не работают: они привязаны к элементам, а у медиазапроса элемента нет. Для брейкпоинтов по-прежнему нужны Sass или PostCSS.

Ждут, что при невалидном значении сработает предыдущее объявление свойства. Значение из var() проверяется уже на этапе вычисления, и свойство становится unset, а не откатывается к прошлой строке.

Склеивают единицу: var(--size)px не даёт 16px. Нужно либо хранить значение сразу с единицей, либо умножать в calc().