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

Posted 2023-03-06

【中文标题】如何将 CSS calc() 与继承一起使用？

【英文标题】：How can I use CSS calc() with inherit?

【发布时间】：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 中

【参考方案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 变量还不是一个东西（如上所述），所以 没有 提供解决方案。现在有，所以我会添加一个。