Question

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

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

然后，我希望能够做到：

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

.light {
    --background-color: white
}

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

因此，默认情况下，我的div的背景为黑色。并且将类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变量赋值吗？

1 个答案: