css - 为什么 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))

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

Answer 1

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

从文档中：

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

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

注意：允许嵌套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 一起使用？