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嵌套操作，但它们等同于简单的括号。

来自documentation：

  

注意：+和-运算符必须用空格包围。对于   例如，calc(50% -8px)将被解析为百分比，然后是a   负长度 - 无效表达式 - 而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>