如何仅在 CSS 变量存在时使用它们？

Question

我有一些 CSS，我想要一个默认颜色，然后用一个变量覆盖它。当 CSS 变量不存在时，我想使用后备颜色。

:root {
    /*--tintColor: red;*/
}

.text {
    color: blue;
    color: var(--tintColor);
}

当变量没有像注释掉那样设置时，颜色变为黑色。在这种情况下，我希望在未定义变量时颜色回到蓝色。这可能吗？

Answer 1

您可以指定fallback类似的属性var(--tintColor, blue)- 请参见下面的演示：

.text {
    color: blue;
    color: var(--tintColor, blue);
}

<div class="text">some text here</div>
<div class="text" style="--tintColor: red">some text here</div>