我可以将 CSS 变量分配给另一个变量吗？

Question

我可以将一个全局定义的 CSS 变量分配给另一个局部定义的变量吗？

例如变量--dark已经全局定义为black.

那么，我希望能够做到：

:root {
    --background-color: --dark
}

.light {
    --background-color: white
}

div {
   background-color: --background-color
}

所以默认情况下，我的 div 会有黑色背景。当 class light 添加到其中时，它将具有白色背景。

我这里需要'default'--dark变量，因为它是一个主题变量。

Answer 1

您应该指定为 var(--dark)

:root {
    --dark : black;
    --background-color: var(--dark);
}

.light {
    --background-color: white;
}

div {
  height: 100px;
  width: 100px;
  background-color: var(--background-color);
}

<div class="light"></div>
<div></div>

我可以将 CSS 变量分配给另一个变量吗？

Can I assign a CSS variable to another?

css

css-variables