Переменные CSS задаются с помощью функции var(). Для их использования необходимо сначала задать переменную в одном из селекторов, а затем применить ее в качестве значения свойства для элемента. Это похоже на понятие константа в некоторых языках программирования.
Пример:
.wrapper {
--maincolor: #ee4f4f;
}
button {
background: var(--info-color);
}Здесь мы в произвольном селекторе wrapper задали переменную maincolor (ее имя всегда обозначается двумя дефисами впереди), а затем использовали ее, чтобы задать фоновый цвет для кнопки button.
Таким образом можно использовать переменные для хранения повторяющихся величин. Наиболее удобно их применять для повторяющихся цветов, поскольку для сайта обычно используется несколько повторяющихся значений цветов.
Синтаксис
var( <переменная> [, <значение> ]? )
Как уже сказано выше имя переменной должно начинаться с двух дефисов. Второй параметр является резервным и применяется, если переменная не определена.
Пример использования
Пусть у нашего сайта будут хедер, футер, а также кнопка и заголовок. Все они должны выводиться в едином цвете.
Без использования переменных нам пришлось бы каждый раз копировать значение нужного цвета при стилизации каждого нового элемента. В нашем же случае мы один раз задали цвет: --main-color: #ea720b, а затем его используем. Таким образом при необходимости можно поменять цвет всех элементов просто изменив константу.
See the Pen
var by Андрей (@adlibi)
on CodePen.
С помощью переменных (еще их называют кастомные свойства) можно задавать любые значения: величину шрифта или его семейство, размеры элемента и т.д.
Область видимости
Область видимости переменной ограничен селектором, в котором она определена. В том числе она будет доступна и в контейнерах, вложенных в контейнер с этим селектором. То есть применимо наследование.
Чтобы определить переменные с глобальной видимостью нужно использовать псевдокласс :root (соответствует элементу <html>). Например:
:root {
--main-color: #ea720b;
}Резервные значения
Как уже говорилось, резервные значения используются, когда переменная не определена или браузер их не поддерживает.
При этом в качестве резервного значения можно использовать вложенные значения, например:
.h2 {
color: var(--main-color, var(--black, #000000));
}Поддержка браузерами
Сервис CanIUse показывает, что в настоящее время уровень поддержки это свойства составляет 66,2%. При этом оно поддерживается последними версиями основных браузеров, Google Chrome, FireFox и т.д., поэтому считаю, его можно использовать при работе с сайтами.