CSS 变量默认值：如果尚未设置则设置

Question

我的 Web 组件使用 CSS 变量。

这些变量需要默认值。

它们在许多文件中使用，所以我想提供一次默认值，并且只提供一次。

第一次尝试使文本变黑。为什么？

一次提供默认值的正确方法是什么？

.a {
  --my-variable: red;
}

.b {
  --my-variable: var(--my-variable, blue);
}

<div class="a">
  <div class="b">
    <span style="color: var(--my-variable);">text</span>
  </div>
</div>

Answer 1

为了补充前面的答案，可能存在您不想在全局:root范围内声明变量的情况。例如，当您创建可重用组件时，您希望在本地声明其样式，而不依赖于全局项目样式。特别是当您正在为其他开发人员构建库时。

在这种情况下，解决方案是将一个变量名称暴露给“外部世界”，并在组件内部使用不同的变量名称。组件容器应该只将可选的外部变量映射到内部变量，并设置其默认值：

.my-component-container {
  /* map optional "external" variables to required "internal" variables */
  --my-variable-inner: var(--my-variable, blue);
}

.my-component-container .my-nested-element {
  color: var(--my-variable-inner);
}

.my-component-container .my-other-nested-element {
  border-color: var(--my-variable-inner);
}

通过这种方式，您可以确保--my-variable-inner始终在组件中定义，并使外部使用者可以选择定义--my-variable。

缺点是您需要记住两个变量名而不是一个。但在这里您可以考虑一些项目范围的约定，例如--inner为每个变量添加或其他后缀。

Answer 2

在 中声明默认值:root，然后在选择器中覆盖。

:root {
  --primary-color: red;
}

* {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0.25rem;
  margin: 0;
}

div {
  --primary-color: green;
}

p {
  --primary-color: blue;
}

<div>HI!</div>
&hellip;
<p>Bye!</p>

Answer 3

第一次尝试使文本变黑。为什么？

因为这--my-variable: var(--my-variable, blue);是无效的，因为您试图用自身表达相同的变量，这是不允许的，因此浏览器将简单地忽略它。然后稍后在使用color: var(--my-variable);颜色时会回退到initial黑色值。

正确的方法是简单地在上层定义变量，它会被所有元素继承（就像@kornieff 提供的解决方案）

从规范：

自定义属性几乎完全不计算，除了它们允许并计算 var() 函数的值。这可以创建循环依赖项，其中自定义属性使用 var()引用自身，或者两个或多个自定义属性每个尝试相互引用。

对于每个元素，创建一个有向依赖图，其中包含每个自定义属性的节点。如果自定义属性 prop 的值包含引用属性 var 的 var() 函数（包括在 var() 的回退参数中），则在 prop 和 var 之间添加一条边。边缘可以从自定义属性到自身。如果在依赖图一个周期，在该周期中的所有自定义属性必须计算为它们的初始值（这是一个保证-无效值）。