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.

Функция CSS var() используется для вставки значения кастомного свойства (также известного как "CSS-переменная") в другое свойство.

Интерактивный пример

border-color: var(--color-a);

border-color: var(--color-b);

border-color: var(--color-c);

<section class="default-example" id="default-example">
  <div id="example-element">
    Three color options have been set on the :root use these to change the
    border color.
  </div>
</section>

:root {
  --color-a: pink;
  --color-b: green;
  --color-c: rebeccapurple;
}

#example-element {
  border: 10px solid #000;
  padding: 10px;
}

Функцию var() нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств.

Синтаксис

Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение.

<var()> = 
  var( <custom-property-name> , <declaration-value>? )

Примечание: Синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, 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

Совместимость с браузерами

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