如何为CSS自定义属性设置`inherit`的值? [英] How do I set a value of `inherit` to a CSS custom property?

问题描述

将自定义属性的值设置为inherit可以完全满足您期望的其他所有CSS属性:它继承了其父项的相同属性值.

Setting a custom property to a value of inherit does exactly what you’d expect for every other CSS property: it inherits the same property value of its parent.

<style>
  figure {
    border: 1px solid red;
  }
  figure > figcaption {
    border: inherit;
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has the same border
    as its parent because it is inherited</figcaption>
</figure>

自定义属性继承(明确):

<style>
  figure {
    --foobar: 1px solid green;
  }
  figure > figcaption {
    --foobar: inherit;
    border: var(--foobar);
  }
</style>
<figure>this figure has no border
  <figcaption>this figcaption has a green border
    because it explicitly inherits --foobar</figcaption>
</figure>

自定义属性继承(隐式):

所有自定义属性(不同于border)默认都是继承的

custom property inheritance (implicit):

all custom properties (unlike border) are inherited by default

<style>
  figure {
    --foobar: 1px solid green;
  }
  figure > figcaption {
    border: var(--foobar);
  }
</style>
<figure>this figure has no border
  <figcaption>this figcaption has a green border
    because it implicitly inherits --foobar</figcaption>
</figure>

我的问题

当您希望将 literal 值inherit实际设置为关键字inherit时，如何将其设置为自定义属性?

my question

How do you set a literal value of inherit to a custom property, when you want its value to actually calculate to the keyword inherit?

<style>
  figure {
    border: 1px solid red;
    --foobar: 1px solid green;
  }
  figure > figcaption {
    border: var(--foobar);
  }
  figure > figcaption:hover {
    --foobar: inherit;
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has a green border
    because it inherits --foobar</figcaption>
</figure>
<!-- on hover -->
<figure>this figure has a red border
  <figcaption>I want this figcaption
    to have a red border (inherited from figure)
    but its border is green!</figcaption>
</figure>

在此示例中，我希望第二个figcaption(悬停时)继承其父级的红色边框，因此我将--foobar设置为inherit.但是，如示例2所示，它不会计算为inherit，而是计算为从父级属性--foobar继承的值(如果有)，在这种情况下为绿色.

In this example, I want the second figcaption (on hover) to inherit its parent’s red border, so I set --foobar to inherit. However as shown in example 2, this does not calculate to inherit, it calculates to the value that is inherited from the parent’s property --foobar (if it has one), which in this case is green.

我完全理解了CSS作者为什么这样设计它:--foobar与其他CSS属性一样，因此设置inherit应该继承其值.所以我想我想问是否有一种解决方法，可以让第二个figcaption继承其父代的边框.

I completely understand why the CSS authors designed it this way: --foobar is just like any other CSS property, so setting inherit should inherit its value. So I guess I’m asking if there is a workaround for getting the second figcaption to inherit its parent’s border.

注意，我考虑过做

figure > figcaption:hover {
  border: inherit;
}

但是这违背了使用CSS变量的目的.

but this defeats the purpose of using a CSS variable.

在figure > figcaption中还有许多其他属性都使用值var(--foobar)的情况下，我不想为悬停场景再次重新定义它们.我宁愿只设置一次这些属性，然后根据上下文重新分配变量.

In the case that there are many other properties in figure > figcaption that all use the value var(--foobar), I don’t want to redefine them all over again for the hover scenario. I'd rather set these properties only once, and then reassign the variable based on context.

推荐答案

我做了一些思考，而这种解决方案使我大吃一惊.我可以将自定义属性与预处理器混入结合使用.

I did some thinking and this solution just hit me. I can use custom properties in conjunction with preprocessor mixins.

<style type="text/less">
  // NOTE: not syntactically valid CSS!
  .mx-border(@arg) {
    border: @arg;
  }
  figure {
    .mx-border(1px solid red);
    --foobar: 1px solid green;
  }
  figure > figcaption {
    .mx-border(var(--foobar));
  }
  figure > figcaption:hover {
    .mx-border(inherit);
  }
</style>
<figure>this figure has a red border
  <figcaption>this figcaption has a green border
    because it inherits --foobar</figcaption>
</figure>
<!-- on hover -->
<figure>this figure has a red border
  <figcaption>This figcaption
    has a red border because the mixin
   sets the `border` property to `inherit`.</figcaption>
</figure>

这样，我可以将所有依赖样式封装到.mx-border() mixin中.这样做并没有利用CSS自定义属性，但是可以减轻第二次为:hover编写所有内容的麻烦.

This way, I can encapsulate all the dependent styles into the .mx-border() mixin. Doing this doesn’t take advantage of CSS custom properties, but it does alleviate the hassle of writing everything a second time for the :hover.

从本质上讲，它与编写border: inherit;相同，具有将更多样式放入mixin中而不必重复它们的附加功能.

Essentially it is the same as writing border: inherit;, with the added ability of putting more styles into the mixin and not having to duplicate them.

这篇关于如何为CSS自定义属性设置`inherit`的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！