CSS 变量只存在时如何使用？

Question

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

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

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

当变量没有设置时，如果它被注释掉，颜色就会变成黑色。在这种情况下，我希望在未定义变量时颜色回落到蓝色。这可能吗？

Answer 1

您可以像 var(--tintColor, blue) 那样指定 fallback 属性 - 请参阅下面的演示：

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

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

How to use CSS Variables only when they exist?