Less 和 SCSS 计算函数

Question

我通常用SCSS as it's the trend and the one I prefer. I used Less来比较两者。我发现使用 Less 时确实有些奇怪。

当我将 calc 函数与 SCSS 一起使用时，例如 height: calc(100vh - 64px)，它会将 100vh 转换为 px，然后将这两个数字相减并将其转换回来进入 vh 单元，这正是所需要的。

另一方面，当做同样的事情，但用Less时，它会立即将减号后面的数字转换为与前面相同的单位，然后再减去这个数字，这很奇怪。因为在前一个例子中计算的高度；少用；将是 36vh，这是 calc(100vh - 64vh)，但事实并非如此。

有人知道如何在使用 Less 时解决这个问题吗？

Answer 1

我从 SASS 转到 Less 时遇到了同样的问题。您需要用引号将 calc() 括起来，并在其前面加上 ~。然后它会正确计算。这就是所谓的 Less Language Escaping.

少:

.test-div {
  width: ~"calc(100vh + 60vh)";
}

Less and SCSS calc function