是否可以在另一个 :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中的一个变量。如果稍后更改主变量，则不会发生任何事情。

获取更多详情相关：CSS scoped custom property ignored when used to calculate variable in outer scope

Is it possible to reference a :root css variable within another :root variable?