css 自定义属性是否存在空值、未定义值或 "falsy" 值？

Question

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

这是一个例子。假设我正在创建一个具有自己颜色的按钮，但如果定义了 --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 */
}

Answer 1

哦，我刚刚意识到我们可以做到这一点：

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

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

这样也减少了重复。

css 自定义属性是否存在空值、未定义值或 "falsy" 值？

Is there a null or undefined or "falsy" value for css custom properties?

css

css-variables