如何在CSS自定义属性（又称为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>

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

如此处所述：设置为使用变量继承的CSS显示属性不起作用，使用inherit将不起作用。

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

Answer 1

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

background:var(--color,inherit)

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

这可能可以解决问题，但是在我们的情况下，这是不够的，因为--color它始终是在:root级别定义的，并且会被伪元素继承¹，因此我们将永远不会使用后备值。

为了解决这个问题，我们可以考虑使用该initial值以取消定义自定义属性并强制使用后备值。如规范中所述：

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

和

要将var（）替换为属性值：

1. 如果由var（）函数的第一个参数命名的自定义属性是受动画污染的，并且var（）函数正在animation属性或它的一手惯用中使用，则将custom属性视为具有其初始值作为此算法的其余部分。
2. 如果由var（）函数的第一个参数命名的自定义属性的值不是初始值，请用相应的自定义属性的值替换var（）函数。除此以外，
3. 如果var（）函数具有后备值作为其第二个参数，请 用fallback value 替换var（）函数。如果回退中有任何var（）引用，请也替换它们。
4. 否则，包含var（）函数的属性在计算值时间无效

我们的代码将如下所示：

background:var(--color,inherit)

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

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

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

这是一个例子：

<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>

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

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