如何基于嵌套类实现关联CSS变量的动态值替换？

问题场景 #

我们的设计系统包含tokens（令牌）与primitives（基础元素），需要根据品牌为不同UI元素关联不同baseColors（基础颜色）。测试代码如下：

HTML结构 #

<h1>Hi this is header</h1>

<div class="branded">
  <h1>Hi this is header</h1>
</div>

CSS代码 #

:root{
  --primary: red;
  --headercolor: var(--primary);
}

.branded{
  --primary: blue;
}

h1{
  color: var(--headercolor);
}

原本期望.branded容器内的元素能使用该类下的--primary值更新--headercolor，但实际仍沿用:root中的--primary值。

补充说明：无法采用逐个指定元素的方式，因为仅能在body上设置一个类，且元素数量过多：

:root {
  --primary: red;
}

h1 {
  color: var(--primary);
}

.branded h1{
  --primary: blue;
}

问题原因 #

--headercolor在:root中定义时，已经将当时的--primary（红色）值固定下来，不会随着后代元素中--primary的变化而动态重新计算。CSS变量的解析逻辑是当变量被使用时，从当前元素向上查找变量值，而非基于定义时的上下文。

解决方案 #

方案1：在目标作用域中重新定义中间变量 #

在.branded作用域内重新计算--headercolor，让它引用当前作用域的--primary值：

:root{
  --primary: red;
  --headercolor: var(--primary);
}

.branded{
  --primary: blue;
  --headercolor: var(--primary); /* 重新绑定当前作用域的--primary */
}

h1{
  color: var(--headercolor);
}

方案2：让中间变量成为动态引用 #

如果不想每个品牌作用域都重复定义--headercolor，可以调整变量逻辑，让--headercolor在使用时才解析基础变量：

:root{
  --primary: red;
}

h1{
  /* 优先使用--headercolor，无值则 fallback 到--primary */
  color: var(--headercolor, var(--primary));
}

.branded{
  --primary: blue;
  /* 若该品牌需特殊标题色，可单独定义--headercolor，否则直接继承--primary */
}

总结 #

CSS变量的解析依赖于使用时的上下文，而非定义时的上下文。如果中间变量（如--headercolor）需要跟随父级作用域的基础变量（如--primary）变化，必须在对应的作用域中重新定义这个中间变量，让它重新绑定当前作用域的基础变量值。

内容的提问来源于stack exchange，提问作者Jason Teunissen