css 自定义属性是否存在空值、未定义或“虚假”值？答案

【问题标题】：Is there a null or undefined or "falsy" value for css custom properties?css 自定义属性是否存在空值、未定义或“虚假”值？
【发布时间】：2018-11-02 12:32:29
【问题描述】：

我想创建一个组件并公开某些可能被父元素覆盖的属性。

这是一个例子。假设我正在创建一个按钮，它有自己的颜色，但如果定义了 --button-bg-color，则允许更改其背景颜色：

.my-button {
  --bg-color: blue;

  /* lots of other css... */

  /**
    * here I assume that there might be a --button-bg-color defined,
    * but I have a fallback to my own --bg-color variable
    */
  background-color: var(--button-bg-color, var(--bg-color));
}

上面代码的问题是 --button-bg-color 变量在样式深处的某个地方被引用。

我希望我能做的是在顶部的某个地方声明我可能想要使用这个变量。这会告诉我这个组件需要被覆盖。

也许是这样的？

.my-button {
  --button-bg-color: undefined; /* is there something like undefined? */
  --bg-color: blue;

  /* the rest of the code is the same */
}

【问题讨论】：

所有颜色属性的假值都没有。
如果none 是var() 的第一个参数，则从不使用回退的意义上说，它看起来不像一个虚假值。刚刚试了一下。
这能回答你的问题吗？ Unset/Delete a custom property/CSS variable

标签： css css-variables

【解决方案1】：

哦，好吧，我刚刚意识到我们可以这样做：

.my-button {
  --bg-color: var(--button-bg-color, blue); /* inherit with fallback */

  /* lots of other css... */
  background-color: var(--bg-color);
}

这样重复也更少。

【讨论】：

这实际上是惯用的（换句话说，理想的）方法。