Настраиваемые свойства (иногда называемые переменными CSS или каскадными переменными) - это сущности, определенные авторами CSS, которые содержат определенные значения для повторного использования в документе. Они устанавливаются с использованием пользовательской записи свойств (например, --main-color: black;) и доступны с помощью функции var () (например, color: var (- main-color);).
Сложные веб-сайты имеют очень большое количество CSS, часто с большим количеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет нужно изменить. Настраиваемые свойства позволяют хранить значение в одном месте, а затем ссылаться на него в нескольких других местах. Дополнительное преимущество - семантические идентификаторы. Например, --main-text-color легче понять, чем #00ff00, особенно если этот же цвет также используется в других контекстах. Настраиваемые свойства подвергаются каскаду и наследуют свое значение от своего родителя.
Объявление настраиваемого свойства выполняется с использованием имени настраиваемого свойства, которое начинается с двойного дефиса (--), и значения свойства, которое может быть любым допустимым значением CSS. Как и любое другое свойство, это записывается внутри набора правил, например:
element {
--main-bg-color: brown;
}
Обратите внимание, что селектор, присвоенный набору правил, определяет область, в которой может использоваться настраиваемое свойство. Распространенной передовой практикой является определение настраиваемых свойств в псевдоклассе: root, чтобы его можно было применять глобально во всем HTML-документе:
:root {
--main-bg-color: brown;
}
Однако это не всегда удобно: возможно, у вас есть причины для ограничения настраиваемых свойств.
Как упоминалось ранее, для использования значение настраиваемого свойства, указывая имя настраиваемого свойства внутри функции var () вместо обычного значения свойства:
element {
background-color: var(--main-bg-color);
}
