如何在继承中使用CSS calc()函数？

Question

我想在calc()函数中使用inherit，像这样：

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

但它似乎无效。

这是浏览器的错误还是规范的问题？

- Yukulélé

---

不是那样工作的...... - DaniP

看来你运气不太好。我测试了一下，发现你不能写calc(100% + 2s)，因为持续时间属性不接受百分比。（仅仅120%也不行。）很抱歉。不过这是个好问题！ - Mr Lister

如果Less是一个选项，你可以这样做：@duration:10s; #foo {animation-duration:@duration;} #foo > .bar {animation-duration:@duration + 2s; }。当然，那并不完全相同。还有CSS变量，但那现在还只是科幻。 - Kobi

嗨，你找到解决方法了吗？ - oren

@oren 纯CSS中没有任何东西。 - Yukulélé

自Firefox Quantum更新（新的Stylo CSS引擎），calc支持秒。 - brandito

Answer 1

inherit关键字只能作为属性声明中的值单独存在，不能与其他任何内容一起使用，因为它是一个独立的值。这意味着它也不能与像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 */
}

- BoltClock

---

没错，可惜没有100%这个选项。 - Mr Lister

被接受的答案并没有提供解决主题任务的方法。如何基于继承值使用公式修改继承值？ - meir

@meir：感谢您的评论。这篇问答是在2014年撰写的，当时CSS变量还不存在（如上所述），因此并没有解决方案可以提供。现在有了，所以我会补充一下。 - BoltClock