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

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

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

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

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

https://codepen.io/xmorell/pen/bGWLoaL 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>

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

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

From 规格 https://www.w3.org/TR/css-variables-1/

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

And

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

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

请参阅下面的示例。

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

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