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

- Tanckom

---

在SASS中进行计算只会给出“静态”结果。calc允许您混合单位，例如calc（100vw-5em），同时还考虑了当前有效值。 - misorude

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; 如果这种解释没有帮助，请告诉我，我会尝试给您一些阅读资源。

- Constantin Chirila

---

如果 $divide-by 是 20，那么高度将变为 5vw。 - Morpheus

换句话说，如果你想要构建响应式设计，那么在大多数情况下我会更倾向于使用calc()而不是SASS计算？ - Advena

@Morpheus 谢谢，我已经修复了。 - Constantin Chirila

@Tanckom 是的，对于响应式设计来说 calc() 是一个不错的选择。但是当涉及到响应式设计时，SASS 计算是无用的，因为在编译时它不知道窗口的大小。 - Constantin Chirila

但是我如何在Sass中使用CSS计算与我拥有的变量？ - Alan Donizete

@AlanDonizete 你可以先声明变量，然后使用width: calc($var1 + $var2)。 - Constantin Chirila