是否可以检查是否定义了 CSS 变量？

Question

我想知道是否可以仅在定义了 css 变量时才应用 CSS 规则。我已经看到可以定义一个默认值，例如：

background-color: var(--bgColor, red);

但我认为这在我的项目中不起作用，因为我想要的是，当未定义变量时，如果该行在 CSS 中不存在，它将具有的样式。

我添加了一个代码笔，以便更容易理解我在说什么：

https://codepen.io/xmorelll/pen/bGWLoaL

.container {
  margin: 5px;
}
.content {
  padding: 5px;
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid black;
  background-color: var(--bgColor) !important;
}

<div class="container">
  <div class="content" style="background-color: blue">blue</div>
</div>

<div class="container">
  <div class="content" style="background-color: yellow">yellow</div>
</div>

<div class="container" style="--bgColor: red">
  <div class="content" style="background-color: green">red</div>
</div>

<div class="container">
  <div class="content" style="--bgColor: green">green</div>
</div>

Answer 1

因为我想要的是，当未定义变量时，如果 CSS 中不存在该行，它将具有的样式。

即使您使用无效值也是不可能的。

来自the specification

如果声明包含引用自定义属性及其初始值的 var()，则声明在计算值时间可能无效，如上所述，或者如果它使用有效的自定义属性，但在替换后的属性值它的 var() 函数是无效的。发生这种情况时，属性的计算值要么是属性的继承值，要么是其初始值，具体取决于该属性是否被继承

和

如果一个属性包含一个或多个 var() 函数，并且这些函数在语法上是有效的，整个属性的语法必须假定在解析时是有效的。在 var() 函数被替换之后，它只在计算值时进行语法检查。

因此，任何使用 css 变量的属性无论其内容如何都是有效的。它仅在计算时间无效，并将回退到 inherit 或 initial（永远不会到其他地方指定的另一个值）

请看下面的例子。

html {
   background:red;
   background:lol-gradient(var(--c), super-power-red-color);
}

即使没有定义css变量并且我使用了明显无效的值，背景也不会是红色的，并且那个奇怪的值是有效的。

Answer 2

您不能在变量中设置默认值，但是，
您可以为默认值和变量值定义相同的键

:root {
  --bg: pink;
}

div {
  background-color: red;  /*Default value*/
  background-color: var(--bg);
}

<div> 123</div>