仅在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>