Настраиваемые свойства CSS для каскадных переменных

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

При работе с CSS вы часто сталкиваетесь с необходимостью повторного использования общих значений, специфичных для проекта, таких как ширины, которые хорошо работают с вашей компоновкой, или набора цветов для вашей цветовой схемы. Один из способов управления повторами в таблице стилей — определить значение один раз и использовать его многократно в других местах. Настраиваемые свойства позволяют создавать и определять настраиваемые переменные, которые могут быть повторно использованы, упрощая сложные или повторяющиеся правила и делая их более читаемыми и поддерживаемыми. Например, --dark-grey-text и --dark-background легче понять, чем шестнадцатеричные цвета, такие как #323831, и контекст их использования также более очевиден.

Настраиваемые свойства в действии

Чтобы увидеть, как можно использовать настраиваемые свойства, переместите ползунок влево или вправо.

В этих цветовых образцах background-color устанавливается с помощью функции hsl() <color> как hsl(var(--hue) 50% 50%). Каждый цветовой образец увеличивает значение <hue> на 10 градусов, как calc(var(--hue) + 10), calc(var(--hue) + 20) и т. д. По мере изменения значения ползунка от 0 до 360 значение настраиваемого свойства --hue настраиваемого свойства обновляется с помощью calc(), а также обновляется цвет фона каждой ячейки внутри сетки.

Справочник

Свойства

--*

Функции

var()

Руководства

Использование настраиваемых свойств CSS (переменные): Объясняет, как использовать настраиваемые свойства в CSS и JavaScript, с подсказками по обработке неопределенных и недопустимых значений, резервных значений и наследования.
Недопустимые настраиваемые свойства: Объясняет, как браузеры обрабатывают значения свойств, когда значение настраиваемого свойства является недопустимым типом данных для этого свойства.

Связанные понятия

API свойств и значений CSS модуль
- @property правило
- CSS.registerProperty() метод

Спецификации

Спецификация
Модуль CSS-настраиваемые свойства для каскадных переменных уровень 1

См. также

Каскад и наследование CSS модуль
CSS env() функция
CSS calc() функция
getPropertyValue() метод

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables