CSS 中另一个 calc() 中的 calc() 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27597034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
calc() function inside another calc() in CSS
提问by Raghavendra Prasad
回答by Bhojendra Rauniyar
It is possible to use calc() inside another calc().
可以在另一个 calc() 中使用 calc()。
An example:
一个例子：
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*/
}
Update on nested calcwith css variables:
使用 css 变量更新嵌套计算：
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
After all variables are expanded, widthC's value will be calc( calc( 100px / 2) / 2), then when it's assigned to .foo's width property, all inner calc()s (no matter how deeply nested) will be flattened to just parentheses, so the width property's value will be eventually calc( ( 100px / 2) / 2), i.e. 25px. In short: a calc() inside of a calc() is identical to just parentheses.
展开所有变量后，widthC 的值将是 calc( calc( 100px / 2) / 2)，然后当它分配给 .foo 的 width 属性时，所有内部 calc()s（无论嵌套多深）都将被展平为括号，因此宽度属性的值最终将是 calc( ( 100px / 2) / 2) ，即 25px。简而言之： calc() 中的 calc() 与括号相同。
So, the current spec as well proves this using parentheses inside calc() is nested calc.
因此，当前的规范也证明了在 calc() 中使用括号是嵌套的 calc。
Learn more about css variables here.
在此处了解有关 css 变量的更多信息。
回答by Xanthir
I'm one of the editors of the Values & Units spec, which defines calc().
我是 Values & Units 规范的编辑之一，该规范定义了 calc()。
calc() shouldbe nestable inside of calc(). There was an oversight in the grammar/definitions for a while that technicallydidn't allow it, but I recently fixed that. Implementations haven't caught up yet, to my knowledge (tho it looks like Chrome 51 and Firefox 48 will have this fixed, woo!).
calc()应该可以嵌套在 calc() 中。有一段时间在语法/定义中存在技术上不允许的疏忽，但我最近解决了这个问题。据我所知，实现还没有跟上（虽然看起来 Chrome 51 和 Firefox 48 会修复这个问题，哇！）。
That said, there is zero reasonto nest calc() expressions normally - they're exactly identicalto just using parentheses. The only reason to do it at all is when using custom properties/variables.
也就是说，通常没有理由嵌套 calc() 表达式 - 它们与仅使用括号完全相同。这样做的唯一原因是在使用自定义属性/变量时。
回答by Abhitalks
The reference you quoted is admittedly a bit confusing.
诚然，您引用的参考文献有点令人困惑。
It is notpossible to use a calcfunction inside another calc.
这是不是可以使用calc内部的另一个函数calc。
From the specs here: http://dev.w3.org/csswg/css-values/#calc-notation
从这里的规格：http: //dev.w3.org/csswg/css-values/#calc-notation
...Components of a calc() expression can be literal values, attr() or calc() expressions, or values..
... calc() 表达式的组件可以是文字值、attr() 或 calc() 表达式，或值..
You can have calcexpression inside the expressions, but not the calc()function itself.
您可以在calc表达式中使用表达式，但不能在calc()函数本身中使用。
And an example is given in that ref for nested expressions:
在该引用中为嵌套表达式给出了一个示例：
width: calc(100%/3 - 2*1em - 2*1px);
And also for multiple calcfor multiple properties:
并且calc对于多个属性的多个：
margin: calc(1rem - 2px) calc(1rem - 1px);
The syntax from the spec above:
来自上述规范的语法：
The syntax of a calc() function is:
<calc()> = calc( <calc-sum> ) <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )Where a <dimension> is a dimension.
In addition, whitespace is required on both sides of the + and - operators. (The * and / operaters can be used without whitespace around them.)
UAs must support calc() expressions of at least 20 terms, where each NUMBER, DIMENSION, or PERCENTAGE is a term. If a calc() expression contains more than the supported number of terms, it must be treated as if it were invalid.
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() 表达式包含的术语数超过支持的数量，则必须将其视为无效。
.
.
