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，则该高度的编译版本将为{{1} }

请让我知道说明是否有帮助，我将尝试给您一些阅读的资源。