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 переменной.