如何使用具有后备功能的 CSS 变量继承值？

如何继承 CSS 变量中的值

CSS 变量，也称为自定义属性，允许我们以可以在整个项目中重复使用的方式存储和操作值。样式表。然而，CSS 变量的一个限制是它们无法从其父元素继承值。

问题

例如，请考虑以下代码：

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

在此代码中，我们有一个 :root 规则，它定义了一个默认值为 rgba(20, 20, 20, 0.5) 的 --color 变量。我们还有一个 .box 类，用于为矩形元素设置一些样式，以及一个 :before 伪元素，用于在框内创建圆形元素。

设置 :before 伪元素的背景属性到 var(--color)，这意味着它将继承 --color 变量的值。但是，我们可以使用内联样式覆盖每个框的 --color 变量的值，如下例所示：

<div class="box red">
<p>前两个框的 --color 变量设置为分别为 rgba(0, 255, 0, 0.5) 和 rgba(0, 255, 255, 0.5)，而第三个框将尝试从其父元素继承 --color 变量。然而，正如我们之前提到的，CSS 变量不能继承值，因此第三个框的 --color 变量将保留其默认值 rgba(20, 20, 20, 0.5)。</p>
<h3 id="解决方案">解决方案</h3>
<p>var() 函数提供了一种为 CSS 变量定义回退值的方法，以防变量未定义或设置为其初始值。后备值被指定为 var() 函数的第二个参数，如下例所示：</p>
<pre class="brush:php;toolbar:false">background: var(--color, inherit);

在此示例中，如果 --color 变量未定义或设置为其初始值时，background属性将继承父元素的颜色。这正是我们在这种情况下想要的行为。

这是添加了后备值的更新代码：

:root {
  --color: rgba(25, 25, 25, 0.5); /* Defined as the default value */
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 0, 255, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color, inherit);
  filter: invert(1);
}

现在，所有三个框都将继承其父框的颜色元素，即使在内联样式中将 --color 变量设置为不同的值。