CSS 变量覆盖

Question

我有一个非常简单的 codepen 设置来尝试概述我想要实现的目标。

我想要一个默认的CSS变量集来控制颜色的色调，但在元素级别，我希望能够根据覆盖来更改颜色，在这种情况下

--h

：

:root {
    // use 50 if --h isn't defined
    --hue: var(--h, 50);
}

.a {
    background-color: hsl(var(--hue), 100%, 50%);
    display: block;
    width: 100px;
    height: 100px;
}

.a.b {
    // should change the hsl value to use 180, but it's using 50
    --h: 180;
}

上面的 CSS（应该）更改具有

b

和

a

类的元素的色调，但它始终解析为第二个元素的父值 50。

令我困惑的部分是，通过在

.a

内提供后备值，它可以工作，但这并不可取，因为我的实际主题 css 要复杂得多：

background-color: hsl(var(--h, var(--hue)), 100%, 50%);

Answer 1

您可以像下面的示例一样实现这一点。更改色调值后，您需要将其定义为背景，否则不会生效。

:root {
    --hue: var(--h, 50);
}

.a {
    background-color: hsl(var(--hue), 100%, 50%);
    display: block;
    width: 100px;
    height: 100px;
}

.a.b {
    --h: 180;
    background-color: hsl(var(--h), 100%, 50%);
}

<div class="a"></div>
<div class="a b"></div>