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

Question

这个问题已经有答案了:

CSS variables defaults: set if not already set (3 个回答)

How can i export shorthand CSS properties (border, border-left, border-right...) as CSS variables (1 个回答)

已关闭 3 年前。

假设我是某个 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); /* this doesn't work */
}
.some-component__container {
  background-color: var(--background-color, blue);
  height: 100px;
  width: 100px;
}

<!-- user code -->
<div class="app">
  <!-- library code -->
  <div class="some-component">
    <div class="some-component__container">
    </div>
  </div>
</div>

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;
}

如果您愿意，您还可以为您的后备定义一个后备:背景颜色:var(--background-color, var(--fallback-bg, green));