禁用LESS-CSS覆盖calc（）

Question

禁用LESS-CSS覆盖calc（）现在我在我的LESS代码中尝试在CSS3中执行此操作：width: calc(100% - 200px);但是，当LESS编译时，它输出：width: calc(-100%);有没有办法告诉LESS不要以这种方式编译并正常输出？

Answer 1

使用转义字符串（也称为转义值）：

width: ~"calc(100% - 200px)";

此外，如果您需要将Less math与转义字符串混合使用：

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

编译为：

width: calc(100% - 15rem + 15px + 2em);

这可以在默认情况下使用空格连接值（转义字符串和数学结果）。

Answer 2

除了使用我的其他答案中描述的转义值之外，还可以通过启用严格数学设置来解决此问题。

通过严格的数学运算，只会处理不必要的括号内的数学，因此您的代码：

width: calc(100% - 200px);

在启用严格数学选项的情况下可以正常工作。

但请注意，严格数学应用于全局，而不仅仅是内部calc()。这意味着，如果你有：

font-size: 12px + 2px;

Less将不再处理数学 - 它将输出font-size: 12px + 2px显然是无效的CSS。您必须包含应由Less in（以前不必要的）括号处理的所有数学：

font-size: (12px + 2px);

在开始一个新项目时，Strict Math是一个很好的选择，否则你可能需要重写代码库的一部分。对于最常见的用例，另一个答案中描述的转义字符串方法更合适。