var()
Функция (en-US) CSS var()
используется для вставки значения кастомного свойства (также известного как "CSS-переменная") в другое свойство.
Интерактивный пример
Функцию var()
нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств.
Синтаксис
Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение.
<var()> =
var( <custom-property-name> , <declaration-value>? (en-US) )
Примечание: синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, var(--foo, red, blue)
задаёт резервное значение red, blue
; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением.
Значения
<custom-property-name>
-
Имя кастомного свойства, начинающиеся с двух дефисов. Кастомные свойства предназначены исключительно для разработчиков и пользователей; CSS никак не влияет на них.
<declaration-value>
-
Резервное значение кастомного свойства. Используется в случае, если кастомное свойство не определено или не может быть использовано в текущем контексте. Резервное значение может содержать любой символ, кроме некоторых спецсимволов, вроде символа новой строки, непарных закрывающих скобок (т.е.
)
,]
, или}
), точку с запятой или восклицательный знак.
Примеры
Использование кастомного свойства, определенного внутри :root
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
Кастомные свойства с резервным значением, когда свойство не было установлено
/* Резервное значение */
/* Стили для элементов компонента: */
.component .header {
color: var(--header-color, blue); /* header-color не существует, поэтому используется blue */
}
.component .text {
color: var(--text-color, black);
}
/* Стили для самого компонента: */
.component {
--text-color: #080;
}
Спецификации
Specification |
---|
CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
env(…)
(en-US) – доступные только для чтения переменные среды, контролируемые браузером- Использование CSS-переменных