Question

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

Answer 1

我是价值观和编辑的编辑之一。单位规格，定义calc（）。

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

也就是说，零原因通常嵌套calc（）表达式 - 它们完全相同只使用括号。完全这样做的唯一原因是使用自定义属性/变量。

Answer 2

可以在另一个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变量更新nested calc：

.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（）s（无论嵌套有多深）将被展平为括号，因此width属性的值最终将为calc（（100px / 2）/ 2），即25px。简而言之：calc（）内部的calc（）与括号相同。

因此，当前的规范也证明了这一点，使用calc（）中的括号是嵌套计算。

详细了解css变量here。

Answer 3

你引用的引用无疑是有点混乱。

不可以在另一个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> ) 
＆lt; dimension＆gt;是一个维度。

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

UAs必须支持至少20个术语的calc（）表达式，其中每个术语都有   NUMBER，DIMENSION或PERCENTAGE是一个术语。如果是calc（）表达式   包含超过支持的术语数量，必须予以处理   好像它是无效的。

在CSS中的另一个calc（）内部的calc（）函数

3 个答案: