如何在 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 值。

如此处所述：，使用 inherit 将不起作用。

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

Answer 1

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

background:var(--color,inherit)

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

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

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

The initial value of a custom property is an empty value; that is, nothing at all. This initial value has a special interaction with the var() notation, which is explained in the section defining var().

和

To substitute a var() in a property’s value:

If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in the animation property or one of its longhands, treat the custom property as having its initial value for the rest of this algorithm.

If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property. Otherwise,

if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well.

Otherwise, the property containing the var() function is invalid at computed-value time

我们的代码将如下所示：

: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.[=29= 中的值]

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：是继承风俗属性而不是背景属性}

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

How to store inherit value inside a CSS variable (aka custom property)?

css

css-variables

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

How to store inherit value inside a CSS variable (aka custom property)?

css

css-variables

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