Переменные CSS (custom properties)

Учимся хранить значения в переменных, чтобы менять цвета и размеры всего сайта в одном месте.

Переменная CSS (custom property) — это именованное значение, которое объявляют через --имя и подставляют функцией var().

Проблема, которую решают переменные

Представьте, что фирменный синий цвет #2575fc встречается в стилях двадцать раз: кнопки, ссылки, рамки, заголовки. Решили сменить оттенок — придётся найти и поправить все двадцать мест, не пропустив ни одного. Переменные убирают эту боль: значение задаётся один раз, а используется по имени.

Объявление и чтение

Переменную объявляют с двумя дефисами в начале имени. Чаще всего — в псевдоселекторе :root, который соответствует корню документа: так переменная видна всему сайту.

:root {
  --brand: #2575fc;
  --radius: 8px;
  --space: 16px;
}

Теперь подставляем значения через var():

.btn {
  background: var(--brand);
  border-radius: var(--radius);
  padding: var(--space);
}

a {
  color: var(--brand);
}

И кнопка, и ссылки берут цвет из одной переменной. Захотели сменить фирменный цвет — правите одну строку в :root, и обновляется весь сайт. Ровно та самая идея «менять в одном месте», ради которой существует CSS.

Значение по умолчанию

Функция var() принимает запасное значение на случай, если переменная не задана:

.box {
  color: var(--text-color, #333); /* если --text-color нет, будет #333 */
}

Переменные наследуются и переопределяются

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

:root {
  --bg: white;
  --text: #222;
}

.dark {
  --bg: #1a1a1a;
  --text: #eee;
}

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

Внутри элемента с классом .dark переменные получают другие значения, и весь блок становится тёмным — без дублирования правил. Достаточно повесить или снять класс dark (например, по клику через JavaScript) — и страница переключает тему.

Где это особенно полезно

Цвета бренда — один источник правды для всей палитры.
Отступы и размеры — единая шкала --space, --radius.
Тёмная тема — переопределяете переменные, а не сотни правил.

Чем отличается от переменных в препроцессорах

Если встречали Sass или Less, там переменные «исчезают» при компиляции — это просто подстановка текста. Переменные CSS живут в браузере: их видно в инструментах разработчика, они меняются на лету и реагируют на классы и медиазапросы. Это намного гибче.

Итог

Переменную объявляют как --имя: значение (обычно в :root) и читают через var(--имя).
var(--имя, запас) задаёт значение по умолчанию.
Переменные наследуются и переопределяются — это удобный путь к темам, включая тёмную.