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

Question

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

例如，变量--dark 已被全局定义为black。

那么，我希望能够做到：

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

.light {
    --background-color: white
}

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

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

我在这里需要“默认”--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>