是否可以在另一个 :root 变量中引用 :root css 变量？

Question

:root {
    --foo: #fff;
    --bar: --foo;
}

一个用例是 - 我允许设置原色并在其他变量中重复使用。

我似乎无法找到任何关于此的信息，我开始认为这是不可能的。

Answer 1

就这样

:root {
    --foo: #fff;
    --bar: var(--foo);
}

您还可以有一个更复杂的案例：

:root {
    --foo: #fff;
    --bar:3px solid var(--foo); /* Define a border using the --foo color*/
}

但是你应该注意到这种东西在大多数情况下是无用的，因为你正在评估内部的变量:root使用另一个。如果稍后更改主变量，则不会发生任何事情。