如何将 CSS calc() 与继承一起使用？

【问题标题】：How can I use CSS calc() with inherit?如何将 CSS calc() 与继承一起使用？
【发布时间】：2014-03-03 13:52:12
【问题描述】：

我想像这样使用inherit 和calc()：

#foo {
  animation-duration: 10s;
}
#foo > .bar {
  animation-duration: calc(inherit + 2s); /* =12s */
}

但它似乎不起作用。

是浏览器的错误还是规范？

【问题讨论】：

这样不行......
看来你运气不好。我测试了你是否可以写calc(100% + 2s)，但持续时间属性不占百分比。（只有120% 本身也不起作用。）对不起。好问题！
如果Less 是一个选项，您可以使用@duration:10s; #foo {animation-duration:@duration;} #foo > .bar {animation-duration:@duration + 2s; }。当然，这并不完全相同。还有CSS Variables，但现在只是科幻小说。
您好，您找到解决方法了吗？
@oren nothink 在纯 css 中

标签： css inheritance css-animations css-calc

【解决方案1】：

inherit 关键字只能作为值单独存在于属性声明中。它不能与 anything else 一起用作值，因为它本身就是一个值。这意味着它也不能与calc() 之类的函数一起使用。请参阅CSS2.1 和css3-cascade。

简单地说，规范不允许以这种方式使用inherit。

考虑到这一点，为了将继承的属性值用作子声明的部分，请创建一个将被继承的自定义属性：

#foo {
  --duration: 10s;
  animation-duration: var(--duration);
}
#foo > .bar {
  /* --duration is automatically inherited - no need for inherit keyword */
  animation-duration: calc(var(--duration) + 2s); /* =12s */
}

【讨论】：

没错，可惜不能选择 100%。
接受的答案没有为主题任务提供解决方案。如何使用基于继承值的公式修改继承值？
@meir：感谢您的评论。这个问答写于 2014 年，当时 CSS 变量还不是一个东西（如上所述），所以没有提供解决方案。现在有，所以我会添加一个。