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

Question

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

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

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

标签： csscss-variables

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 范围自定义属性在用于计算外部范围内的变量时被忽略