var()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Функция (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

css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

Кастомные свойства с резервным значением, когда свойство не было установлено

css
/* Резервное значение */
/* Стили для элементов компонента: */
.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

Смотрите также