CSS 中另一个 calc() 中的 calc() 函数

Posted 2023-03-06

【中文标题】CSS 中另一个 calc() 中的 calc() 函数

【英文标题】：calc() function inside another calc() in CSS

【发布时间】：2015-02-20 05:14:41

【问题描述】：

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

【参考方案1】：

可以在另一个 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()(不管嵌套多深)将被展平为仅括号，因此宽度属性的值最终将是 calc((100px / 2) / 2)，即 25px。简而言之：calc() 中的 calc() 与括号相同。

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

详细了解 css 变量here。

【讨论】：

那是回复。我看到您只使用一个 calc 函数。我的问题是如何在另一个 calc 函数中使用一个 calc。

问的不是这个。

此答案应包含calc(100% - calc(1% + 30px));（或calc(100% - (calc(1% + 30px)));，如果您想符合规范），否则无法回答问题。

@chharvey 已更新。谢谢。

【参考方案2】：

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

不可能在另一个 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> ) 

其中 是一个维度。

另外，+和-两边都需要空格 运营商。 （* 和 / 操作符可以不带空格使用 在他们周围。）

UA 必须支持至少 20 个术语的 calc() 表达式，其中每个 NUMBER、DIMENSION 或 PERCENTAGE 是一个术语。如果 calc() 表达式 包含超过支持数量的术语，必须对其进行处理 好像它是无效的。

.

【讨论】：

我认为它已经过时了。去年的语法修订建议您实际上可以嵌套calc() 函数调用：w3.org/TR/css3-values/#calc-syntax 当然，那是去年。我不知道它是否曾经以这种方式实现过。

@BoltClock：您链接的规范是 2013 年 7 月 30 日的。我链接到的规范是 2014 年 12 月 19 日的“开发”。所以，我认为正确的参考是你链接到的规范。但是，即使这样也不能说 calc 可以嵌套。可能我看的不仔细吧！

您可以看到 calc 产品嵌套在另一个产品中...嵌套在 calc 产品中。无论如何，事实证明实现确实遵循 ED 中的内容，所以我认为他们只是更改了规范以匹配。

是的，这只是语法上的疏忽。资料来源：我是规范编辑，我最近修复了这个问题。

看起来 Internet Explorer 11 不支持嵌套计算，例如calc(((100% - calc((80 / 100) * (100% + 17px))) / 2) + 17px / 2).. Chrome 没问题。

【参考方案3】：

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

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

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

【讨论】：

嘿标签！请注意，大约在你写这篇文章的时候，这个问题的修复程序落在了 Blink 中。在此之前它也被固定在 Gecko 中。我猜你参与了这两个修复，无论如何感谢，我需要它（用于自定义属性；））。所以修复将在 Chromium 51、Opera 38 和 Firefox 48 中。

你能举个例子吗？例如 calc(1 + (2 / 3))

这是一个用例，尽管您可能不喜欢它。我正在使用样式化组件，根据某处表格中的值定义一些边框宽度很方便。我有另一个基于这个属性的属性，另一个基于这个属性。所以我有w === '2px'（比如说）、w_ === `calc($w * 2)` 和w__ === `calc($w_ * 2`。这比实际的代码有些做作，但这是基本思想。

这是一个需要嵌套 calc() 的示例：width: calc(100vw - calc(var(--page-margin) * 2))