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>

在上面的代码中，我们能够使用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）在未定义 inherit的情况下使用 --color。

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

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


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


和


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


如果自定义属性由var（）的第一个参数命名
函数已被动画污染，并且var（）函数正在
动画属性或其惯用手之一，请对待自定义
属性，因为此算法的其余部分具有其初始值。
如果自定义属性的值由第一个参数命名，
var（）函数不是初始值，请替换var（）
通过相应的自定义属性的值来实现功能。除此以外，
如果var（）函数将后备值作为第二个参数，
用后备值替换var（）函数。如果有的话
备用中的var（）引用，也请替换它们。
否则，包含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：关于自定义属性的继承，而不是背景属性