为什么 CSS calc() 函数不起作用？答案

【问题标题】：Why the CSS calc() function is not working? [duplicate]为什么 CSS calc() 函数不起作用？
【发布时间】：2020-07-03 01:17:12
【问题描述】：

为什么这个calc(100vw/4) 有效，但以下都无效？

calc(100vw/4-(10-4))
calc(100vw/4-(10px-4))
calc(100vw/4-(10px-4px))
calc(100vw/4-calc(10px-4px))

如何管理表达式 calc(100vw/x-(10px-x))，其中 x 在 SASS 循环中被替换以工作？

【问题讨论】：

CSS 不是编程语言，所以不可能进行复杂的计算，也不应该这样做。
但是你可以在互联网上到处看到嵌套计算的提及。所以只有一个运算符，没有嵌套？
@MatthiasS。我不同意你的看法。即使 CSS 不是一种编程语言，我们有时也可能会考虑进行一些复杂的计算以获得一些结果。当然，我们首先需要寻找简单的解决方案，但有时我们需要复杂的解决方案。
@TemaniAfif 如果你真的需要进行如此复杂的计算，那么你应该使用支持这一点并生成纯 CSS 的 Javascript 或预处理器。 CSS 应该尽可能简单
@MatthiasS。在这种情况下，为什么 CSS 中有 calc ？为什么我们可以嵌套calc 操作？有一个原因：例如一个没有像 JS 这样的编程知识的设计师将能够使用这些东西来做他想做的事情。

标签： css css-calc

【解决方案1】：

您需要在运算符之间添加空格，忘记它们是一个常见的错误。我们还可以使用calc 嵌套任意数量的操作，但它们相当于简单的括号。

来自documentation：

注意：+ 和 - 运算符必须用空格括起来。为了例如，calc(50% -8px) 将被解析为百分比后跟负长度——一个无效的表达式——而calc(50% - 8px) 是一个百分比后跟减法运算符和长度。同样地， calc(8px + -50%) 被视为一个长度，后跟一个加法运算符和负百分比。

* 和 / 运算符不需要空格，但添加它一致性是允许和推荐的。

注意：允许嵌套calc()函数，在这种情况下内部的被视为简单的括号。

.one {
  background: red;
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2)); /*Same as calc(20px + (40px * 2))*/
  height: calc(100px - 10px);
  padding: calc(5% + 10px) calc(5% - 5px);
}

<div class="one">

</div>

处理max()、min() 和clamp() 时的逻辑相同，因为它们接受与calc() 相同的参数

【讨论】：

不知道是不是所有浏览器都支持calc()嵌套？
@NicolasHoizey 我会说是的，但您可能会发现一些特殊情况..您可以参考此链接caniuse.com/#search=calc ..“已知问题”部分
我在 CanIUse 中没有发现任何关于嵌套的内容，这就是我在那里问的原因...... ;-)
@NicolasHoizey 这就是为什么它是 yes 除非您发现某些东西不起作用或者您面临特殊情况;)
@NicolasHoizey 我发现了一个不工作的嵌套 calc 案例。（在最大值内嵌套计算）