Переопределение переменной CSS ⇐ CSS
-
Anonymous
Переопределение переменной CSS
У меня есть очень простая настройка кода, чтобы попытаться описать, чего я пытаюсь достичь.
Я хочу иметь набор переменных CSS по умолчанию, управляющий оттенком цветов, но на уровне элемента я хочу иметь возможность изменять цвет на основе переопределения, в данном случае --h:
:root { // используйте 50, если --h не определен --hue: var(--h, 50); } .а { цвет фона: hsl(var(--hue), 100%, 50%; дисплей: блок; ширина: 100 пикселей; высота: 100 пикселей; } .а.б { // следует изменить значение hsl на 180, но оно использует 50 --ч: 180; } Приведенный выше CSS (должен) изменить оттенок элемента, который имеет класс b и a, однако он всегда разрешается в родительское значение 50 для второго элемент.
Меня сбивает с толку то, что, предоставляя резервное значение в .a, это работает, но это нежелательно, поскольку мой фактический CSS темы намного сложнее:
background-color: hsl(var(--h, var(--hue)), 100%, 50%);
У меня есть очень простая настройка кода, чтобы попытаться описать, чего я пытаюсь достичь.
Я хочу иметь набор переменных CSS по умолчанию, управляющий оттенком цветов, но на уровне элемента я хочу иметь возможность изменять цвет на основе переопределения, в данном случае --h:
:root { // используйте 50, если --h не определен --hue: var(--h, 50); } .а { цвет фона: hsl(var(--hue), 100%, 50%; дисплей: блок; ширина: 100 пикселей; высота: 100 пикселей; } .а.б { // следует изменить значение hsl на 180, но оно использует 50 --ч: 180; } Приведенный выше CSS (должен) изменить оттенок элемента, который имеет класс b и a, однако он всегда разрешается в родительское значение 50 для второго элемент.
Меня сбивает с толку то, что, предоставляя резервное значение в .a, это работает, но это нежелательно, поскольку мой фактический CSS темы намного сложнее:
background-color: hsl(var(--h, var(--hue)), 100%, 50%);
Мобильная версия