如何将`inherit`的值设置为CSS自定义属性？

Question

将自定义属性设置为值inherit正是您对其他每个CSS属性的期望：它继承了其父级的相同属性值。

普通属性继承：

<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不同）

<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>

我的问题

如果希望将其值实际计算为关键字inherit，如何将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继承的值（如果有的话），在本例中为绿色。 / p>

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

注意，我考虑过做

figure > figcaption:hover {
  border: inherit;
}

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

如果figure > figcaption中有许多其他属性都使用值var(--foobar)，我不希望再次为悬停方案重新定义它们。我宁愿只设置一次这些属性，然后根据上下文重新分配变量。

Answer 1

我做了一些思考，这个解决方案只是打击了我。我可以将自定义属性与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第二次写入所有内容的麻烦。

基本上它 与写border: inherit;相同，增加了将更多样式放入mixin而不必复制它们的能力。