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

Question

为什么这个 calc(100vw/4) 能用，但以下四个表达式都不行？

1. calc(100vw/4-(10-4))
2. calc(100vw/4-(10px-4))
3. calc(100vw/4-(10px-4px))
4. calc(100vw/4-calc(10px-4px))

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

- super.t

---

{btsdaf} - Matthias Seifert

{btsdaf} - super.t

{btsdaf} - Temani Afif

@TemaniAfif 如果你真的需要进行如此复杂的计算，那么你应该使用支持此功能并生成纯CSS的Javascript或预处理器。CSS应尽可能保持简单。 - Matthias Seifert

{btsdaf} - Temani Afif

Answer 1

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

从文档中： 注意：必须在+和-运算符周围加上空格。例如，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()相同的参数。

相关：为什么min()（或max()）不能使用无单位的0？

- Temani Afif

---

你知道所有浏览器是否支持calc()嵌套吗？ - Nicolas Hoizey

@NicolasHoizey 我会说是的，但你可能会发现一些特殊情况.. 你可以参考这个链接 https://caniuse.com/#search=calc .. 其中的“已知问题”部分。 - Temani Afif

我在 CanIUse 上没有找到关于嵌套的提及，所以我才会在那里问...;-) - Nicolas Hoizey

@NicolasHoizey，这就是为什么除非您发现某些东西不起作用或面对特殊情况，否则它是一个“是”;) - Temani Afif

@NicolasHoizey 我发现了一个嵌套 calc 不起作用的情况。（在 max 内部嵌套 calc） - Shahryar Saljoughi