Nested Derived CSS Variable未生效，如何让header背景色取局部--primary值

问题原因说明 #

首先纠正一个常见误区：你预期的效果本质上是符合CSS变量设计规则的。CSS变量在解析时，会在调用该变量的元素作用域下递归展开嵌套的var()表达式，按你贴出的代码理论上应该能得到#EA5742的结果，如果实际渲染不符合预期，大概率是存在更高优先级的样式覆盖了header作用域下的--primary变量，或者存在变量名拼写错误，可以通过浏览器开发者工具的样式面板直接查看元素的CSS变量计算值定位问题。

如果想要更稳定、兼容性更好的实现，可以参考以下两种方案：

方案1：手动同步关联变量（全浏览器兼容） #

这是成本最低、兼容性最好的实现，直接在header作用域内重定义关联的--header-background-color即可：

:root {
  --primary: #1776BF;
  --header-background-color: var(--primary);
}

header {
  --primary: #EA5742;
  /* 新增本行同步关联变量 */
  --header-background-color: var(--primary);
}

header {
  position: fixed;
  top: 0;
  height: 60px;
  left: 0;
  right: 0;
  background-color: var(--header-background-color);
}

适合变量关联关系少、需要兼容旧版浏览器的场景。

方案2：用@property定义可继承变量（现代浏览器支持） #

如果你不需要兼容IE等老旧浏览器，可以使用CSS Houdini的@property规则显式声明变量的继承属性，不需要重复同步关联变量：

/* 先显式定义--primary的属性规则 */
@property --primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #1776BF;
}

:root {
  --header-background-color: var(--primary);
}

header {
  --primary: #EA5742;
}

header {
  position: fixed;
  top: 0;
  height: 60px;
  left: 0;
  right: 0;
  background-color: var(--header-background-color);
}

适合有大量变量联动的设计系统场景，Chrome 85+、Firefox 108+、Safari 16.4+均已支持该特性。

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