CSS переменные
- Предыдущая страница CSS пользовательский интерфейс
- Следующая страница CSS переменные покрытия
CSS переменные
Функция var() используется для вставки значений CSS переменных.
CSS переменные могут обращаться к DOM, что означает, что вы можете создавать переменные с локальным или глобальным alcance, изменять переменные с помощью 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 переменные могут иметь глобальный или локальный alcance.
Глобальные переменные могут быть доступны и использованы во всем документе, в то время как локальные переменные могут использоваться только в селекторе, в котором они объявлены.
Чтобы создать переменную с глобальным alcance, объявите ее в селекторе :root. Селектор :root соответствует корневому элементу документа.
Чтобы создать переменную с локальным alcance, объявите ее в селекторе, в котором вы планируете использовать ее.
Ниже приведен пример, аналогичный предыдущему, но здесь используется функция 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() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Функция CSS var()
Функция | Описание |
---|---|
var() | Вставьте значение CSS переменной. |
- Предыдущая страница CSS пользовательский интерфейс
- Следующая страница CSS переменные покрытия