如何在CSS变量(又称为自定义属性)中存储继承值? [英] How to store inherit value inside a CSS variable (aka custom property)?

问题描述

让我们考虑这个简化的示例以说明问题:

Let's consider this simplified example in order to illustrate the issue:

: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值.

In the above code we are able to manipulate the background of the pseudo element using CSS variable. In some cases, we need to have the same color as the main element but since we don't know what color is used, we cannot set it manually and the best way should be to use the inherit value.

如此处所述:设置为使用变量继承的CSS显示属性不起作用，请使用inherit将无法正常工作.

As explained here: Css display property set to inherit with variable doesn't work, the use of inherit won't work.

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

Is there any way to be able to store the inherit value within a CSS variable and use it later within any property (background in our example)?

推荐答案

在这种情况下，我们可以考虑CSS变量的后备值.就像规范中所述，我们可以这样写:

In such case, we can consider the fallback value of a CSS variable. Like explained in the specification we can write something like this:

background:var(--color,inherit)

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

By doing this, we tell our property (background) to use inherit in case --color is not defined.

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

This may solve the issue but in our case it won't be enough since --color is always defined at :root level and will get inherited¹ by the pseudo element thus we will never use the fallback value.

要解决此问题，我们可以考虑使用initial值，以便取消定义自定义属性并强制使用后备值.如规范所述:

To fix this we can consider the initial value in order to undefine our custom property and force the use of the fallback value. As described in the specification:

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

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().

和

要 用属性值替换var() :

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

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

1. 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.
2. 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,
3. 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.
4. Otherwise, the property containing the var() function is invalid at computed-value time

我们的代码将如下所示:

Our code will then look like this:

: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中的值.

We simply need to set initial to the custom property in order to force the inherit to be used as a value within background.

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

The usage of initial can also be useful in order to stop the propagation of CSS variable at a particular level since by default it's inherited by all the elements.

这里是一个例子:

: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:这是关于自定义属性的继承，而不是背景属性}

^{1: it's about the inheritance of the custom property and not the background property}

这篇关于如何在CSS变量(又称为自定义属性)中存储继承值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！