CSS. Блочная модель

Объявление глобальной переменной CSS

Чтобы переменная была доступна глобально, определите её в псевдоклассе :root, который соответствует корневому элементу в дереве документов (обычно это тег <html>).

Поскольку переменные наследуются, то они доступны во всём вашем приложении, так как все ваши DOM-элементы являются потомками тега <html>.

:root {
--main-color: #ff6f69;
}

Переменная должна начинаться с двух дефисов (--).

Для получения доступа к переменной, нужно использовать функцию var() и передать имя переменной в качестве первого параметра.

#title {
color: var(--main-color);
}
/*И это назначит вашему заголовку цвет #ff6f69:*/

Функция var поддерживает второй параметр, фолбэк, то есть значение (или также CSS-переменная), которое будет использоваться, если переменная, переданная первым параметром, не определена, например:

#title {
color: var(--main-color, black);
}

Если переменная main-color недоступна, то будет использоваться черный цвет (black).

Объявление локальной переменной

Переменные с локальной областью видимости,доступны только для того элемента, в котором они были объявлены, включая его дочерние элементы.

Например, у вас может быть окно с предупреждением, в котором используется определённый цвет, который не используется в других частях приложения. В этом случае скорее всего нецелесообразно определять этот цвет в глобальной области:

.alert {
  --alert-color: #ff6f69;
}

Теперь эта переменная может использоваться в дочерних элементах:

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

Если вы попытаетесь использовать переменную alert-color в другой части приложения, например, в навигационной панели, это не сработает: браузер просто проигнорирует такую строку CSS (за исключением, если не был предоставлен фолбэк вторым параметром).

Реализация адаптивности с переменными

Большое преимущество CSS-переменных заключается в том, что они имеют доступ к DOM.
На практике это означает, что вы можете, например, изменить переменные в зависимости от ширины экрана:

:root {
  --main-font-size: 16px;
}

media all and (max-width: 600px) {
  :root {
    --main-font-size: 12px;
  }
}

Всего четыре строки кода изменили базовый размер шрифта при просмотре вашего приложения на маленьком экране.

Как получить доступ к переменным из JavaScript?

Доступ к CSS-переменным с помощью JavaScript — это ещё одно из преимуществ того, что CSS-переменные являются частью DOM. Вы можете обновлять их значения, что может пригодится, если вы хотите дать возможность вашим пользователям изменять внешний вид сайта (например, изменить размер шрифта).

Например.Получение значение CSS-переменной через JavaScript занимает три строки кода:

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');

console.log(mainColor); // '#ffeead'

Для обновления переменной CSS, просто вызовите метод setProperty на элементе, в котором была объявлена переменная, и передайте имя переменной в качестве первого параметра и новое значение — вторым.


root.style.setProperty('--main-color', '#88d8b0');

Изменение основного цвета повлияет на весь внешний вид приложения, что идеально подходит для случаев, когда пользователи могут выбрать тему на вашем сайте.