Переменные CSS: общие значения оформления
Как задавать дизайн через custom properties и локально менять оформление компонента.
Как это работает
Пользовательские свойства начинаются с двух дефисов и используются через var(). Они участвуют в каскаде и по умолчанию наследуются. Поэтому цвет можно объявить один раз у корня, а в конкретной секции переопределить без копирования всей таблицы стилей.
Запасное значение var(—accent, green) помогает, когда переменная не определена или невалидна как пользовательское свойство. Оно не обязательно спасает от значения, которое существует, но не подходит конечному свойству. Проверяйте тип используемого значения.
Пример в интерфейсе
:root { --accent: #11694e; }
.card { color: var(--accent); border: 2px solid var(--accent); padding: 16px; margin: 8px; }
.warm { --accent: #a34d22; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| —accent: #11694e | Объявление пользовательского свойства. |
| var(—accent) | Подстановка вычисленного значения. |
| :root | Общее место для значений темы. |
| Локальное объявление | Переопределение для ветки документа. |
На что обратить внимание
Имена пользовательских свойств чувствительны к регистру. —Color и —color — разные переменные, поэтому опечатка может проявиться только в части интерфейса.
Проверьте на практике
Измените —accent внутри .warm. Обе карточки используют одно правило, но получают разные локальные значения.
Связанные темы: color, specificity.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.