49

如何在另一个 CSS calc 函数中使用 CSS calc 函数？根据这篇文章，这是可能的，但没有这样的例子。

4

3 回答 3

58

可以在另一个 calc() 中使用 calc()。

一个例子：

div{
  width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/
}
div p{
  width: calc(100% - 30px);/*100% is total width of the div*/
}

使用 css 变量更新嵌套计算：

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

展开所有变量后，widthC 的值为 calc( calc( 100px / 2) / 2)，然后赋值给 .foo 的 width 属性时，所有内部的 calc()（无论嵌套多深）都将被展平为括号，所以宽度属性的值最终将是 calc((100px / 2) / 2)，即 25px。简而言之： calc() 内部的 calc() 与括号相同。

因此，当前规范也证明了在 calc() 中使用括号是嵌套计算。

在此处了解有关 css 变量的更多信息。

于 2014-12-22T05:37:19.970 回答
55

我是定义 calc() 的 Values & Units 规范的编辑之一。

calc()应该可以嵌套在 calc() 中。语法/定义中有一段时间在技术上不允许出现疏忽，但我最近修复了它。据我所知，实现还没有赶上（看起来 Chrome 51 和 Firefox 48 会修复这个问题，哇！）。

也就是说，正常嵌套 calc() 表达式的理由为零——它们与仅使用括号完全相同。这样做的唯一原因是在使用自定义属性/变量时。

于 2016-04-04T23:57:29.440 回答
12

您引用的参考文献确实有点令人困惑。

不能在calc另一个calc. _

从这里的规格：http: //dev.w3.org/csswg/css-values/#calc-notation

... calc() 表达式的组成部分可以是文字值、attr() 或 calc() 表达式，或值..

您可以在calc表达式中包含表达式，但不能在calc()函数本身中包含表达式。

该参考文献中给出了嵌套表达式的示例：

width: calc(100%/3 - 2*1em - 2*1px);

也适用calc于多个属性：

margin: calc(1rem - 2px) calc(1rem - 1px);

上述规范中的语法：

calc() 函数的语法是：

<calc()> = calc( <calc-sum> ) 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

<dimension> 是一个维度。

此外，+ 和 - 运算符的两边都需要空格。（ * 和 / 操作符可以在它们周围没有空格的情况下使用。）

UA 必须支持至少 20 个术语的 calc() 表达式，其中每个 NUMBER、DIMENSION 或 PERCENTAGE 都是一个术语。如果 calc() 表达式包含的项数超过支持的数量，则必须将其视为无效。

.

于 2014-12-22T05:45:21.703 回答