Коротко: CSS-переменные объявляют через двойной дефис — --color: #003F8F, обычно в блоке :root. Используют их функцией var(): color: var(--color). Значение переменной можно менять в разных местах и даже через JavaScript.
Объявление и использование
| Часть | Пример |
|---|---|
| Объявление | --brand: #003F8F; |
| Использование | color: var(--brand); |
| Запасное значение | var(--brand, blue) |
Пример
:root {
--brand: #003F8F;
--accent: #992222;
--radius: 8px;
}
.btn {
background: var(--brand);
border-radius: var(--radius);
}Объявление в :root делает переменную доступной во всём документе. Имя чувствительно к регистру: --brand и --Brand — разные переменные.
Вкладки: применение
.card { --pad: 24px; padding: var(--pad); }
.card--small { --pad: 12px; }Переменную можно объявить внутри элемента. Тогда её область действия ограничена этим блоком и его потомками — удобно для вариантов компонента.
body.dark {
--bg: #111;
--text: #eee;
}Переопределив переменные на другом классе, получают тему одним переключением: все элементы, использующие эти переменные, обновятся автоматически.
js
document.documentElement.style
.setProperty('--brand', '#992222');Через JavaScript переменную меняют на лету — так делают переключатели темы и настройки без перезагрузки страницы.
Практика: использовать переменные
- Соберите повторяющиеся значения: цвета, радиусы, отступы.
- Объявите их в
:root. - Замените значения на
var(--имя). - Для локальных вариантов объявляйте переменные в компоненте.
- Добавьте запасные значения для критичных мест.
- Проверьте, что смена переменной меняет всё.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Переменная не работает | не объявлена | объявить в :root |
| Стиль пропал | опечатка в имени | проверить регистр и дефисы |
| Не применилось в компоненте | область действия | объявить выше |
| Старый браузер | нет поддержки | задать запасное значение |
| Значение не меняется | перебили !important |
убрать конфликт |
Проверьте себя
Вопросы и ответы
:root — корень документа, поэтому переменные доступны везде. Это удобное место для глобальных цветов, отступов и радиусов.
Да, --color и --Color — разные переменные. Держите единый стиль имён, обычно со строчных букв и дефисов.
CSS-переменные работают в браузере: их можно менять на лету через JavaScript и переопределять в разных областях. Переменные препроцессоров вычисляются один раз при сборке.
Да, это один из главных плюсов: в медиазапросе переопределяют переменную, и все использующие её элементы меняются сразу.
Итоги
- Переменные объявляют через
--имя, обычно в:root. - Используют их функцией
var(--имя). - Можно задать запасное значение:
var(--имя, fallback). - Переменные удобны для тем и смены стилей через JavaScript.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.