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

Question

为什么这个 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 循环中被替换以正常工作？

Answer 1

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

Note: The + and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length—an invalid expression—while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.

The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended.

Note: It is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses.

.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()

相同的参数

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

Why the CSS calc() function is not working?

css

css-calc