CSS-переменные

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

Объявление и var()

Имя переменной начинается с двух дефисов. Объявляют её как обычное свойство, а читают функцией var():

<style>
  .card {
    --accent: tomato;
    border: 2px solid var(--accent);
    color: var(--accent);
    padding: 8px;
  }
</style>
 
<div class="card">Рамка и текст одного цвета</div>

Замените tomato на другой цвет в одном месте — изменятся и рамка, и текст.

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

Переменные наследуются, как цвет текста: они действуют на элемент и всё, что внутри него. Поэтому общие значения объявляют в :root — псевдоклассе, который выбирает корневой элемент <html>. Так переменные доступны на всей странице:

<style>
  :root {
    --brand: rebeccapurple;
    --radius: 8px;
  }
  .button {
    padding: 8px 16px;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand);
    color: white;
  }
  h3 { color: var(--brand); }
</style>
 
<h3>Заголовок</h3>
<button class="button">Кнопка</button>

Переопределение

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

<style>
  :root { --brand: rebeccapurple; }
  .danger { --brand: crimson; }
  .button {
    padding: 8px 16px;
    border: 0;
    background: var(--brand);
    color: white;
  }
</style>
 
<button class="button">Обычная</button>
<button class="button danger">Опасная</button>

Правило для кнопки одно и то же — поменялось только значение переменной. Так делают темы и варианты компонентов.

Запасное значение

Вторым аргументом var() указывают значение на случай, если переменная не объявлена:

<style>
  .note {
    background: var(--note-bg, lightyellow);
    padding: 8px;
  }
</style>
 
<p class="note">Переменной --note-bg нет, взят запасной цвет.</p>

Переменные в вычислениях

Числа из переменных можно использовать в функции calc(), которая считает значения. Так размеры строят от одной базы:

<style>
  :root { --space: 8px; }
  .box {
    padding: var(--space);
    margin-bottom: calc(var(--space) * 3);
    background: lavender;
  }
</style>
 
<div class="box">Отступ 8px внутри</div>
<div class="box">и 24px между блоками</div>

Подробнее о calc() и других функциях — в главе о современном CSS. Там же урок о @property: он задаёт переменной тип, и её становится можно анимировать.

Частая ошибка

Имя переменной само по себе не подставляет значение — нужна функция var(). Кроме того, имена чувствительны к регистру: --Brand и --brand — разные переменные:

<style>
  :root { --brand: seagreen; }
  .a { color: --brand; }
  .b { color: var(--Brand); }
  .c { color: var(--brand); }
</style>
 
<p class="a">color: --brand — не сработало</p>
<p class="b">var(--Brand) — другое имя, не сработало</p>
<p class="c">var(--brand) — зелёный</p>