CSS-переменные

01.11.2018

Теги: CSS • HTML • Web-разработка • Верстка • Переменная • ПользовательскиеСвойства

Обычная практика при разработке сайта — составить набор фирменных цветов, которые будут использоваться, чтобы поддержать единый стиль. Увы, многократное использование этих цветов в CSS не только является рутинной работой, но ещё и создаёт пространство для возникновения ошибок.

Использование пользовательских свойств CSS (CSS Custom Properties) приводит к уменьшению дублирования, повышению читабельности и большей гибкости. Пользовательские свойства часто еще называют CSS-переменные. Они не требуют никаких инструментов для работы, поскольку поддерживаются самим браузером.

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

Чтобы объявить переменную, сначала нужно решить, в какой области должна быть эта переменная. Если нужно, чтобы она была доступна глобально, надо определить её в псевдоклассе :root, который соответствует корневому элементу в дереве документов. Переменная должна начинаться с двух дефисов: 

:root {
    --main-color: #ff6f69;
}
Псевдокласс :root находит корневой элемент дерева документа, т.е. <html> и идентичен селектору по тегу html, но его специфичность выше.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доступ к переменным из JavaScript

Доступ к CSS-переменным с помощью JavaScript — это ещё одно преимущество того, что CSS-переменные являются частью DOM. 

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

console.log(mainColor);

Поиск: CSS • Web-разработка • Переменная • Пользовательские свойства • Функция • querySelector • getComputedStyle • getPropertyValue • CSS Custom Properties

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.