SASS：calc() 与普通计算？

Question

我之前开始使用 SASS（具体来说是 scss）并且想知道 css calc() 方法或 sass 计算之间是否有任何区别/优势/劣势？

$divide-by: 50;

//CSS calc()
.example1 {
  height: calc(100vw / #{$divide-by});
}

//SASS calculation
.example2 {
  height: 100vw / $divide-by;
}

Answer 1

SASS 计算是在编译时进行的。而 CSScalc()总是在浏览器上制作的。例如：

SASSheight: 100px / 2;将编译为height: 50px;<- 这就是浏览器无论如何都会看到的内容。

width: calc(100% - 20px)即使在浏览器上，CSS也将始终如此，此时浏览器将根据 100% 的样子进行计算。

在你的情况下，height: 100vw / $divide-by;我相信你的变量将被视为一个vw值，所以如果$divide-by是 20，那么该高度的编译版本将是height: 5vw;

如果解释没有帮助，请告诉我，我会尝试为您提供一些资源来阅读。