能否在CSS的:root变量中引用另一个:root变量？

嘿，我来帮你搞定这个CSS变量复用的问题！你现在写的代码:root { --foo: #fff; --bar: --foo; }其实没法实现变量复用的效果，因为直接写--foo会被浏览器当成普通的字符串值，而不是引用已定义的变量。

要在一个CSS变量里复用另一个变量，你需要用var()函数来包裹被引用的变量名，正确的写法应该是这样：

:root {
  --foo: #fff;
  --bar: var(--foo); /* 通过var()函数引用--foo变量 */
}

这样--bar就会成功继承--foo的值#fff了。

另外给你补充几个实用的小细节：

• 可以给var()添加回退值，比如var(--foo, #ccc)，如果--foo未定义或者失效，就会用#ccc作为备选值
• CSS变量支持作用域，如果你在某个元素内重新定义--foo，那这个元素及其子元素里的--bar也会同步使用新的--foo值
• 变量名是区分大小写的，--Foo和--foo会被识别成两个完全不同的变量

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