CSS-переменные — функция var()
CSS-переменные
Функция 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)
| 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
селектора. Селектор :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()функцию.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS-функция var()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |