如何在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级别定义，并且会被伪元素继承1，因此我们将永远不会使用后备值。

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

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

和

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

1.
如果由var（）函数的第一个参数命名的自定义属性是受动画污染的，并且var（）函数正在animation属性或它的一手惯用中使用，则将custom属性视为具有其初始值作为此算法的其余部分。
2. 如果由var（）函数的第一个参数命名的自定义属性的值 不是初始值 ，请用相应的自定义属性的值替换var（）函数。除此以外，
3. 如果var（）函数 具有后备值 作为其第二个参数，请 用 fallback value 替换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为custom属性，以将强制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：关于自定义属性的继承，而不是背景属性