如何将继承值存储在 CSS 变量（又名自定义属性）中？

Question

让我们考虑这个简化的例子来说明问题：

:root {
  --color:rgba(20,20,20,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,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);
}

<!-- we can add any color we want -->
<div class="box red" style="--color:rgba(0,255,0,0.5);">
</div>
<div class="box blue" style="--color:rgba(0,255,255,0.5);">
</div>

<!-- we can add the same color but this won't be dynamic -->
<div class="box red" style="--color:rgba(255,0,0,0.5);">
</div>

<!-- it would be good to be able to inherit the value but this won't work -->
<div class="box red" style="--color:inherit;">
</div>

在上面的代码中，我们可以使用 CSS 变量来操作伪元素的background。在某些情况下，我们需要与主元素具有相同的颜色，但由于我们不知道使用什么颜色，因此无法手动设置，最好的方法是使用 inherit 值。

正如这里解释的：Css display property set to inherit with variable doesn't work，inherit 的使用将不起作用。

有什么方法可以将 inherit 值存储在 CSS 变量中并稍后在任何属性中使用它（在我们的示例中为 background）？

Answer 1

在这种情况下，我们可以考虑 CSS 变量的后备值。就像the specification 中解释的那样，我们可以这样写：

background:var(--color,inherit)

通过这样做，我们告诉我们的属性 (background) 在未定义 --color 的情况下使用 inherit。

这可能会解决问题，但在我们的例子中，这还不够，因为--color总是定义在:root 级别，并且会被继承¹伪元素，因此我们永远不会使用回退值。

为了解决这个问题，我们可以考虑使用initial 值来取消定义我们的自定义属性并强制使用回退值。如the specification中所述：

自定义属性的初始值是空值；也就是说，什么都没有。此初始值与 var() 表示法有特殊的交互作用，这在定义 var() 的部分中进行了说明。

和

用 var() 替换属性值：

1. 如果自定义属性由 var() 的第一个参数命名 函数被动画污染，并且 var() 函数被用于 动画属性或其长手之一，对待自定义 属性具有该算法其余部分的初始值。
2. 如果自定义属性的值由第一个参数命名为 var() 函数是除了初始值之外的任何东西，替换 var() 通过相应自定义属性的值起作用。否则，
3. 如果 var() 函数有一个备用值作为它的第二个参数， 用备用值替换 var() 函数。如果有的话 var() 后备中的引用，也替换它们。
4. 否则，包含 var() 函数的属性在 计算值时间

我们的代码将如下所示：

: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);
}

<div class="box red" style="--color:initial;">
</div>
<div class="box blue" style="--color:initial;">
</div>

<div class="box" style="background:grey;--color:initial;">
</div>

我们只需将initial 设置为自定义属性，以强制将inherit 用作background 中的值。

---

initial 的使用也可以用于在特定级别停止 CSS 变量的传播，因为默认情况下它被所有元素继承。

这是一个例子：

:root {
  --color: blue;
}
.container div{
  border:5px solid var(--color,red);
  padding:5px;
}
.stop {
  --color:initial;
}
.green {
  --color:green;
}

<div class="container">
  <div> 
    <div>
      <div class="stop"> <!-- we stop at this level -->
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container stop"> <!-- we stop at this level -->
  <div> 
    <div>
      <div class="green">  <!-- we redefine at this level -->
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

^{1：这是关于自定义属性的继承，而不是背景属性}