SASS：calc() 与普通计算？

Posted 2023-03-06

【中文标题】SASS：calc() 与普通计算？

【英文标题】：SASS: calc() vs normal calculation?

【发布时间】：2019-03-22 23:47:35

【问题描述】：

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

$divide-by: 50;

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


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

【问题讨论】：

在 SASS 中的计算只会给你一个“静态”的结果。 calc 允许您混合单位，例如 calc(100vw - 5em)，这也考虑到 当前 有效值。

【参考方案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;

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

【讨论】：

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

换句话说，如果你想构建响应式，那么在大多数情况下我应该更喜欢 calc() 而不是 SASS 计算？

@Morpheus 谢谢，我修好了。

@Tanckom 是的，出于响应目的calc() 是选项。 SASS 计算在响应式方面是无用的，因为在编译时它不知道窗口的大小。

但是如何将 css 计算与我在 sass 上的变量一起使用？