CSS переменные, они же кастомные свойства, появились несколько лет назад, но многие до сих пор их недооценивают. А зря! Это мощный инструмент, который делает код чище, гибче и позволяет менять тему сайта на лету. Если вы ещё не используете их в полную силу, самое время погрузиться.

Digital-студия WNDER

Что такое CSS переменные и с чем их едят

Кастомные свойства (custom properties) — это обычные CSS-свойства, которые начинаются с двух дефисов: --my-color: #ff0000;. Они хранят значения, которые можно переиспользовать в любом месте таблицы стилей. Главное отличие от переменных в препроцессорах (Sass, Less) — они живут в браузере и могут меняться динамически.

Представьте, что у вас есть коробка с красками. Вы можете в любой момент взять нужный цвет и покрасить что угодно. CSS переменные — та же коробка, только для значений свойств.

Объявляются они внутри селектора, чаще всего в :root (это псевдокласс, который соответствует корневому элементу документа). Например:

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
}

Обратите внимание: чтобы использовать переменную, нужна функция var(). Внутри неё можно указать fallback-значение: var(--primary-color, blue) — если переменная не определена, подставится синий.

Правило: Всегда определяйте переменные в :root, если хотите использовать их глобально. Это как глобальные константы в программировании.

Область видимости и наследование

CSS переменные наследуются. Если объявить переменную в :root, она доступна везде. Но можно переопределить её внутри конкретного селектора — тогда для этого элемента и его потомков будет действовать новое значение.

Это открывает крутые возможности для тем. Например, делаем тёмную тему:

:root {
  --bg: white;
  --text: black;
}

.dark-theme {
  --bg: #222;
  --text: #eee;
}

body {
  background: var(--bg);
  color: var(--text);
}

Теперь достаточно добавить класс dark-theme к body или любому контейнеру, и все переменные внутри переопределятся. Никаких дублирований стилей!

Важно: переменные не работают в медиа-запросах и не могут быть использованы в именах свойств или селекторах. Только в значениях.

Динамика: меняем значения через JavaScript

Самое вкусное — это возможность менять переменные на лету с помощью JS. Вы можете создать переключатель темы, анимацию или даже интерактивную настройку интерфейса.

Пример: кнопка, которая меняет основной цвет.

const root = document.documentElement;
const btn = document.querySelector('.change-color');

btn.addEventListener('click', () => {
  const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
  root.style.setProperty('--primary-color', randomColor);
});

Всё просто: получаем корневой элемент, вызываем setProperty и передаём имя переменной и новое значение. После этого все элементы, использующие var(--primary-color), мгновенно обновятся.

А ещё можно считывать значения: getComputedStyle(root).getPropertyValue('--primary-color').

Лайфхак: Используйте CSS переменные для анимаций. Например, меняйте --rotation и применяйте transform: rotate(var(--rotation)) — это позволяет анимировать свойства, которые обычно не анимируются.

Сравнение с препроцессорами: таблица

Многие путают CSS переменные с переменными в Sass или Less. Давайте разложим по полочкам.

Характеристика CSS переменные Sass/Less
Время жизни В браузере, динамические Компилируются в статические значения
Изменение через JS Да Нет (только перекомпиляция)
Наследование Да, по DOM-дереву Нет, только лексическое
Использование в медиа-запросах Да (значения) Да (в том числе в условиях)
Поддержка браузерами Все современные Требуется компиляция

Вывод: CSS переменные и препроцессоры не заменяют, а дополняют друг друга. Первые — для динамики, вторые — для генерации кода.

Продвинутые приёмы и подводные камни

Кастомные свойства можно использовать в calc(), clamp() и других функциях. Например, адаптивные отступы:

:root {
  --spacing-base: 8px;
}

.container {
  padding: calc(var(--spacing-base) * 2);
}

Но есть нюанс: если переменная содержит единицы измерения, calc() сработает. Если же вы попытаетесь сделать calc(var(--spacing-base) * 2px), браузер может не понять. Лучше хранить числа без единиц и умножать на нужное значение с единицей.

Ещё одна фишка — переменные как фолбэки для других переменных:

.element {
  color: var(--custom-color, var(--fallback-color, black));
}

Это позволяет создавать цепочки значений.

Осторожно с производительностью: большое количество переменных и частое изменение через JS может вызвать перерисовку. Но в большинстве случаев это незаметно.

Совет: Для сложных тем оформления используйте набор переменных, сгруппированных по смыслу. Например, --color-primary, --color-secondary, --font-size-base и т.д. Это упростит поддержку.

Итог

CSS переменные — это не просто синтаксический сахар. Это мощный механизм, который даёт вашей вёрстке гибкость и динамичность. Они наследуются, поддерживают fallback, работают с JavaScript. Используйте их для тем, адаптивности, анимаций. И не забывайте про область видимости.

Если вы ещё не внедрили их в свой проект — начните сегодня. Это как перейти с фиксированных значений на резиновую вёрстку: сначала непривычно, потом не понимаешь, как жил без этого.

Удачи в экспериментах!

Студия WNDER