css - 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;

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