Представьте, что фирменный синий цвет вашего сайта встречается в стилях полсотни раз: в кнопках, ссылках, рамках, акцентных линиях. Заказчик просит сделать его чуть темнее — и вам приходится искать и заменять цвет в десятках мест, рискуя что-то пропустить. CSS-переменные (их официальное имя — custom properties) решают эту боль: вы задаёте цвет один раз под понятным именем, а потом ссылаетесь на него везде. Поменяли значение в одном месте — обновился весь сайт. Это фундамент поддерживаемых стилей и, что важно для нашего курса, основа тем оформления — включая тёмную тему, к которой мы придём в конце раздела.

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

Что уже умеем / что добавим

Вы умеете оформлять элементы, анимировать их и строить макеты. Но значения — цвета, размеры — вы пока прописываете напрямую в каждом правиле. Теперь научимся хранить их в переменных и переиспользовать. В сквозном проекте мы соберём палитру сайта компании в набор переменных — это наведёт порядок в стилях и подготовит почву для тёмной темы.

Что вы узнаете в рамках статьи

• Как объявить CSS-переменную и что означает префикс -.
• Как использовать переменную через функцию var().
• Зачем объявлять переменные в псевдоклассе :root.
• Как задавать запасное значение и переопределять переменные локально.

Ключевые термины

• CSS-переменная (custom property) — именованное значение, объявляемое с префиксом - и переиспользуемое в стилях.
• -имя — синтаксис объявления переменной (например, -accent).
• var() — функция, подставляющая значение переменной.
• :root — псевдокласс корня документа, где объявляют глобальные переменные.
• Запасное значение — значение, которое var() подставит, если переменная не задана.

Объявление переменной

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

.button {
  --accent: #2d6cdf;
}

Здесь мы создали переменную --accent со значением синего цвета. Два дефиса в начале — обязательный признак, по которому браузер отличает переменную от обычного свойства. Имя может быть любым осмысленным: --accent, --gap-large, --text-color. Само по себе объявление ничего не красит — переменная лишь хранит значение, а применяют её отдельно, через var().

Использование: функция var()

Чтобы подставить значение переменной, её оборачивают в функцию var():

.button {
  --accent: #2d6cdf;
  background: var(--accent);
  border: 2px solid var(--accent);
}

Оба свойства — и фон, и цвет рамки — возьмут значение из --accent. Теперь, чтобы изменить и фон, и рамку, достаточно поправить переменную в одном месте. В этом вся сила: значение живёт в одной точке, а используется во многих. Если понадобится тот же цвет в другом правиле, снова пишем var(--accent) — лишь бы переменная была доступна в этом месте (об области видимости — дальше).

Глобальные переменные в :root

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

:root {
  --accent: #2d6cdf;
  --accent-dark: #1e4fa3;
  --text: #222;
  --gap: 16px;
}

.button {
  background: var(--accent);
  color: white;
}

.title {
  color: var(--text);
}

Мы собрали палитру и базовые размеры в :root, и теперь любое правило на странице может к ним обращаться. Это и есть основа «темы оформления»: все ключевые значения сайта — в одном месте, под понятными именами. Меняете --accent в :root — и обновляются все кнопки, ссылки и акценты сразу. Именно так организуют цвета в современных проектах.

Запасное значение и локальное переопределение

У var() есть удобная возможность — запасное значение на случай, если переменная не задана. Его указывают вторым аргументом:

.box {
  color: var(--text, #333);
}

Если --text где-то объявлена, возьмётся она; если нет — подставится запасной #333. Это страхует от «пустого» значения. Второе важное свойство переменных — их можно переопределять локально: значение, заданное на конкретном элементе, действует на него и его потомков, перекрывая глобальное:

.card--highlight {
  --accent: #e0473e;
}

Внутри карточки с классом .card--highlight переменная --accent станет красной, и все var(--accent) в этой карточке подхватят новый цвет, не затрагивая остальной сайт. Именно эта способность переопределять переменные в поддереве и делает возможными темы: достаточно сменить значения переменных на родителе — и всё внутри перекрасится. Мы воспользуемся этим для тёмной темы в конце раздела.

Применяем в проекте

Наведём порядок в стилях сайта компании: соберём палитру и базовые размеры в переменные :root и перепишем ключевые правила через var(). Это сделает стили чище и подготовит сайт к смене темы.

:root {
  --accent: #2d6cdf;
  --accent-dark: #1e4fa3;
  --bg: #ffffff;
  --text: #222222;
  --gap: 24px;
}

.btn {
  background: var(--accent);
  color: #fff;
}

.btn:hover {
  background: var(--accent-dark);
}

.section {
  background: var(--bg);
  color: var(--text);
  gap: var(--gap);
}

Теперь весь фирменный стиль сайта описан переменными в одной точке. Захотите сделать акцент насыщеннее — поправите одну строку в :root, и обновятся кнопки, ссылки, акцентные линии разом. Стили стали понятнее: имена вроде --accent и --text читаются лучше, чем разбросанные повсюду коды цветов. А главное — мы заложили основу темы, на которой позже построим тёмный режим.

Частые ошибки

• Один дефис вместо двух.
  Переменная объявляется с -; запись с одним дефисом не считается переменной.
• Забыть var().
  Написать background: --accent недостаточно; значение подставляет только var(--accent).
• Переменная вне области видимости.
  Объявленная в узком правиле переменная не видна снаружи; глобальные значения кладите в :root.
• Нет запасного значения там, где нужно.
  Если переменная может быть не задана, добавьте запас: var(--x, значение).

Итоги

Отличная работа — вы освоили CSS-переменные! Теперь вы умеете объявлять их с префиксом --, подставлять через var(), собирать глобальную палитру в :root, задавать запасные значения и переопределять переменные локально. В сквозном проекте вы навели порядок в стилях сайта компании и вынесли всю палитру в одну точку — менять оформление стало легко и безопасно.

Прекрасный старт третьего раздела — ваши стили стали гибкими и поддерживаемыми! В следующем уроке мы познакомимся с современным селектором :has(), который умеет выбирать элемент по его содержимому — то, что раньше в CSS было невозможно.