Переменные в CSS

По мере роста проекта его CSS файлы разрастаются и засоряются. Справиться с этим помогут CSS переменные, они дают возможность повторно использовать повторяющиеся CSS свойства.
Раньше переменные можно было использовать только в Less или Sass, но это препроцессоры и требуют компиляции перед использованием. Теперь переменные доступны в чистом CSS.

Объявление и использование переменных в CSS

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

:root{
    --awesome-blue: #2196F3;
}

Для доступа к значению переменной надо использовать конструкцию var(…). Обратите внимание, что имена зависят о регистра, то есть —foo != —FOO.

.some-element{
    background-color: var(--awesome-blue);
}

Поддержка

На данный момент Firefox поддерживает переменные в CSS. В Google Chrome начиная с версии 49 это возможность включена, если вы используете версию 48 или более старую, то вы можете вручную включить поддержку, перейдя на страницу chrome://flags/ и включить Enable experimental Web Platform features.

Пример 1 — Цветовые схемы

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

Теперь, если заказчик захотел поменять цвет на странице, мы можем изменить весь стиль поменяв одну строку (строку объявления переменной). Без переменных нам пришлось бы менять все места, где используется этот цвет.

Пример 2 — Понятные названия для сложных свойств

Еще одна замечательная возможность, которую дают CSS переменные — спрятать сложное свойство за коротким понятным именем. Хороший пример — CSS свойства с несколькими параметрами, например: box-shadow, transform и font.

Объявив переменную с понятным именем мы сможем использовать её не тратя время на разбор сложного свойства.

Пример 3 — Динамические переменные

Когда переменная объявлена несколько раз, к ней применяются стандартные CSS правила наследования. Следующий пример демонстрирует как можно динамически управлять свойствами в зависимости от действий пользователя, при этом сохранить краткий и чистый код.

Наведите на зеленый и на синий блоки.

Заключение

Как видите переменные довольно просты в использовании и их определенно стоит попробовать. Рассмотрим еще пару вещей, на которые стоит обратить внимание:

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

  width: var(--custom-width, 20%);

• При объявлении собственного правила так же можно использовать переменные:

  --base-color: #f93ce9;
  --background-gradient: linear-gradient(to top, var(--base-color), #444);

• Переменные можно использовать с еще одним нововведением в CSS — функцией calc(). Однако работает это пока только в Firefox:

  --container-width: 1000px;
  max-width: calc(var(--container-width) / 2);
  

На этом все! Попробуйте использовать CSS переменные, но пока избегайте их в серьезных проектах.