CSS 变量覆盖 [duplicate]

问：

我有一个非常简单的 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（应该）更改具有类 & 的元素的色调，但是它始终解析为第二个元素的父值 50。ba

令我感到困惑的是，通过在其中提供回退值可以工作，但这是不可取的，因为我的实际主题 css 要复杂得多：.a

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