CSS自定义属性覆盖问题：元素级--h无法替换--hue默认值

我想实现通过根节点的CSS变量统一控制颜色色调，同时允许在元素级别通过--h变量覆盖默认值。但当前代码无法实现预期效果：

:root {
    /* 预期：若未定义--h则使用50 */
    --hue: var(--h, 50);
}

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

.a.b {
    /* 预期将色调改为180，但实际仍显示50对应的颜色 */
    --h: 180;
}

同时拥有.a和.b类的元素，背景色并没有变成180色调的颜色，始终使用根节点的50。只有在.a的background-color属性里添加回退值才能生效，但实际主题CSS逻辑复杂，这种方案并不理想：

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

问题原因 #

核心在于CSS变量的计算时机：

• --hue是在:root节点定义的，此时子元素的--h还未被声明，var(--h, 50)会直接回退到50，--hue的值就此固定为50。
• 当子元素后续定义--h:180时，--hue已经是计算完成的固定值，不会重新计算，因此子元素继承的--hue仍是50，无法被元素级的--h影响。

解决方案 #

方案1：调整变量依赖逻辑 #

把默认值直接绑定到--h上，让--hue直接引用--h，这样元素级覆盖--h时，--hue会自动同步更新：

:root {
    --h: 50; /* 根节点定义默认色调 */
    --hue: var(--h);
}

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

.a.b {
    --h: 180; /* 元素级覆盖后，--hue会自动使用该值 */
}

方案2：在属性使用处保留回退逻辑（兼容现有结构） #

如果无法修改根节点的变量结构，只能在每个使用--hue的属性位置，保留对--h的直接引用，确保元素级的--h能生效：

.a {
    background-color: hsl(var(--h, var(--hue)), 100%, 50%);
    /* 其他属性 */
}

若主题逻辑复杂，可通过CSS预处理器（如Sass/Less）封装这个回退逻辑，减少重复代码的编写。

内容的提问来源于stack exchange，提问作者Shannon Hochkins