如何在子元素中基于继承的CSS变量值计算新值

你遇到的问题是因为循环引用：当在.b中重新定义--foo时，表达式里的var(--foo)会优先尝试引用当前元素正在定义的--foo，而不是父元素继承来的值，浏览器会判定这种循环引用无效，直接清空变量值。

下面是几种可行的解决方法：

方法1：直接在属性使用时计算（最简单） #

不需要重新定义--foo，直接在height属性里基于继承的变量计算：

div {
  height: var(--foo);
  border: 1px solid #f00;
}

.a {
  --foo: 100px;
}

.b {
  height: calc(var(--foo) - 25px);
}

这样.b的高度会直接计算为100px - 25px = 75px，完全避开变量重定义的问题。

方法2：用额外变量存储父元素的原始值 #

如果需要保留--foo变量的重定义（比如多个属性要用到这个新值），可以在父元素里用一个基础变量存原始值，子元素基于这个基础变量计算：

div {
  height: var(--foo);
  border: 1px solid #f00;
}

.a {
  --base-height: 100px;
  --foo: var(--base-height);
}

.b {
  --foo: calc(var(--base-height) - 25px);
}

这种方式不会产生循环引用，子元素的--foo会正确计算为75px，所有用到--foo的属性都会使用这个新值。

方法3：结合var()的fallback和inherit #

如果不想新增变量，可以利用var()的 fallback 特性，显式指定用父元素继承的值来计算：

div {
  height: var(--foo);
  border: 1px solid #f00;
}

.a {
  --foo: 100px;
}

.b {
  --foo: calc(var(--foo, inherit) - 25px);
}

这里的var(--foo, inherit)表示：如果当前元素的--foo还未定义（也就是在计算这个表达式的时候），就使用父元素继承来的--foo值。这样就能避免循环引用，正确计算出新的--foo值。

注意：不能直接写calc(inherit - 25px)，因为inherit是CSS关键字，无法直接参与数值计算，必须通过var()把它转换为具体的数值。

内容的提问来源于stack exchange，提问作者Daphne Preston-Kendal