css - 是否可以引用 :root css variable within another :root variable?

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