SASS: calc() 与正常计算？

Question

我之前开始使用 SASS（具体来说是 scss）并且想知道 css calc() 方法之间是否有任何 difference/advantage/disadvantage 或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;

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

SASS: calc() vs normal calculation?