继承 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); 行似乎 "break" 不知何故 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;
}

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

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

Inherit a CSS variable, or fallback to default

css

css-variables