CSS - функция var()
Пример
Сначала объявите глобальную переменную с именем "--main-bg-color", а затем используйте функцию var(), чтобы позже вставить значение переменной в таблицу стилей:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Функция var() используется для вставки значения переменной CSS.
Версия: | CSS3 |
---|
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает эту функцию.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Синтаксис CSS
var(--name, value)
Value | Description |
---|---|
name | Required. The variable name (must start with two dashes) |
value | Optional. The fallback value (used if the variable is not found) |
Дополнительные примеры
Пример
Другой пример, использующий функцию var() для вставки нескольких значений переменных CSS:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
Связанные страницы
Учебник по CSS: CSS-переменные