CSS3 Переменные
CSS Функция var()
Функция var() используется для вставки значения CSS переменной.
CSS Переменные имеют доступ к DOM, что означает, что вы можете создавать переменные с локальной или глобальной областью видимости, изменять переменные с помощью JavaScript и изменять переменные на основе медиа-запросов.
Хороший способ использовать CSS переменные - это когда речь заходит о цветах вашего дизайна. Вместо того чтобы копировать и вставлять одни и те же цвета снова и снова, вы можете поместить их в переменные.
Традиционный способ
В следующем примере показан традиционный способ определения некоторых цветов в таблице стилей (путем определения используемых цветов для каждого конкретного элемента):
Пример
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
Попробуйте сами »
Синтаксис функции var()
Функция var() используется для вставки значения CSS переменной.
Синтаксис функции var() следующий:
var(--name, value)
| Значение | Описание |
|---|---|
| name | Требуемый. Имя переменной (должно начинаться с двух тире) |
| value | Необязательный. Запасное значение (используется, если переменная не найдена) |
Примечание: Имя переменной должно начинаться с двух тире (--) и учитываться с учетом регистра!
Как работает var()?
Прежде всего: переменные CSS могут иметь глобальную или локальную область видимости.
Доступ к глобальным переменным/их использование возможны по всему документу, в то время как локальные переменные могут использоваться только внутри селектора, где он объявлен.
Чтобы создать переменную с глобальной областью видимости, объявите ее внутри :root
селектор. Селектор :root соответствует корневому элементу документа.
Чтобы создать переменную с локальной областью видимости, объявите ее внутри селектора, который собирается ее использовать.
Следующий пример аналогичен приведенному выше, но здесь мы используем функцию var().
Сначала мы объявляем две глобальные переменные (--blue и --white). Затем мы используем функцию var(), чтобы вставить значения переменных позже в таблицу стилей:
Пример
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Попробуйте сами »
Преимущества использования переменной var() заключаются в следующем:
- облегчает чтение кода (делает его более понятным)
- значительно упрощает изменение значений цвета
Чтобы изменить сине-белый цвет на более мягкий сине-белый, вам просто нужно изменить два значения переменных:
Пример
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Попробуйте сами »
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает функцию var().
| Функция | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS Функция var()
| Свойство | Описание |
|---|---|
| var() | Вставляет значение CSS переменной |