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计算是在编译时进行的。 虽然CSS calc()总是在浏览器上进行。 例如：

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

CSS width: calc(100% - 20px)将始终在浏览器上均匀，并且此时浏览器将根据100％的样子进行计算。

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

如果解释没有帮助，请告诉我，我会尽量给你一些资源来阅读。