⚗️ Пользовательские переменные

?> Подробнее: Переменные CSS, var()

Пользовательские переменные в CSS аналогичны тем, что мы используем в SCSS и LESS, но первые поддерживают управление значениями переменных с помощью JavaScript. Они начинаются с двух дефисов (--), например, --main-color: #b4a078. Для использования переменной используется функция var(--main-color). Функция var() принимает два аргумента, например, var(--main-color, gray), где первый аргумент — это имя пользовательского свойства, а второй — значение по умолчанию.

В следующих примерах показано, как использовать метод setProperty JavaScript для изменения значений CSS-переменных и управления стилем элементов и псевдоэлементов.<script v-pre type="text/x-template" id="custom-variables">

<style> /* Глобальные custom-variables */ /* :root { --r: 51; --g: 51; --b: 51; } */ main { width: 100%; padding: 60px 29px; display: flex; flex-direction: column; align-items: center; } label { display: flex; align-items: center; } input { padding: 0; width: 29px; height: 29px; } div.variables-block { width: 100%; display: flex; justify-content: center; margin-top: 29px; } /* Локальные custom-variables */ div.variables-block > div { --r: 51; --g: 51; --b: 51; } div.variables-block > div::after { content: ""; display: inline-block; width: 52px; height: 52px; background: rgb(var(--r), var(--g), var(--b)); } </style> Выберите тематический цвет: <script> const Color = require('./libs/color.js'); const INITIAL_COLOR = '#b4a078'; export default { data() { return { value: INITIAL_COLOR, }; }, computed: { colorList() { const mainColor = this.value.length === 7 ? this.value : INITIAL_COLOR; return this.getColorList(mainColor); }, }, methods: { getColorList(val) { const color = new Color(val); return Array.from({ length: 10 }).map((v, i) => { let rgb = color.mix(new Color('white'), i / 10); this.$nextTick(() => { const style = this.$refs[`variable${i}`][0].style; style.setProperty('--r', rgb.red()); style.setProperty('--g', rgb.green()); style.setProperty('--b', rgb.blue()); }); }); }, }, }; </script> </script>!> Чтобы установить конкретное значение, просто измените значение `INITIAL_COLOR` в примере, **поддерживается только шестизначный 16-ричный цветовой формат**.### Поддержка браузеров <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-variables&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>