使用Less，CSS3 calc（）无法正常工作

Question

当我在Chromes和Firefox的Inspector中直接使用此calc(100% + 20px)时，它可以正常工作，如图所示。

然而，当我将它插入我的less文件时，它会转换为120%。我做错了什么？

Answer 1

Less会尝试处理所有数学，包括100% + 20px。

你可以set Strict Math on：

lessc -sm=on
lessc --strict-math=on

或使用 tilde-quote ~"100% + 20px"以防止Less处理该语句。

例如：

.class {
    padding-left: calc(~"100% + 20px");
}

Answer 2

.class {
  padding-left: ~"calc(100% + 50px)";
}

如果你有一些例如

定义的变量

@toolbar-height: 50px;

这可以写成如下

.class {
  padding-left: ~"calc(100% + @{toolbar-height})";
}

将CSS文件转换为较少的

时，这不会产生任何问题