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(имя, значение)
| Значение | Описание |
|---|---|
| имя | Обязательно. Имя переменной (должно начинаться с двух тире) |
| значение | Не обязательно. Резервное значение (используется, если переменная не найдена) |
Примечание: Имя переменной должно начинаться с двух дефисов (-), и оно чувствительно к регистру!
Как работает 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 |
