1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
title: var()
slug: Web/CSS/var()
tags:
- CSS
- CSS Custom Properties
- CSS Function
- CSS Variables
- Experimental
- Function
- Reference
- Variables
- var
- var()
browser-compat: css.properties.custom-property.var
---
{{CSSRef}}
[Функция](/ru/docs/Web/CSS/CSS_Functions) [CSS](/ru/docs/Web/CSS) **`var()`** используется для вставки значения [кастомного свойства](/ru/docs/Web/CSS/--*) (также известного как "CSS-переменная") в другое свойство.
{{EmbedInteractiveExample("pages/css/var.html")}}
Функцию `var()` нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств.
## Синтаксис
Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение.
{{csssyntax}}
> **Примечание:** синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, `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;
}
```
## Спецификации
{{Specifications}}
## Поддержка браузерами
{{Compat}}
## Смотрите также
- {{cssxref("env()","env(…)")}} – доступные только для чтения переменные среды, контролируемые браузером
- [Использование CSS-переменных](/ru/docs/Web/CSS/Using_CSS_custom_properties)
|
