继承 CSS 变量，或回退到默认值

Question

假设我是某个 Web 组件的库作者；我想允许用户设置我的组件的背景颜色。我通过设置允许这样做--background-color。例如，用户可以编码：

:root {
  --background-color: green;
}

现在在我的组件中，我想要获取用户的 值--background-color，或者使用默认颜色：

.some-component {
  display: contents;
  --background-color: var(--background-color, red);
}

然而上面的代码不起作用。我不介意，有解决方法；但我想知道为什么它不起作用，如果有人有答案的话。

在下面的代码中，预期是绿色，但该行--background-color: var(--background-color, red);似乎以某种方式“破坏”了 CSS。

:root {
  --background-color: green;
}

.some-component {
  display: contents;
  --background-color: var(--background-color, red);
}

Answer 1

您不能用变量本身覆盖变量，因此我建议定义第二个变量，其中包含每个上下文的后备值：

:root {
  --fallback-bg: green;
}
.some-component {
  display: contents;
  --fallback-bg: red;
}
.some-component__container {
  background-color: var(--background-color, var(--fallback-bg));
  height: 100px;
  width: 100px;
}

如果您愿意，您还可以为后备定义后备： background-color: var(--background-color, var(--fallback-bg, green));