现在我正尝试在我的 LESS 代码中的 CSS3 中执行此操作：
width: calc(100% - 200px);
但是，当 LESS 编译时，它会输出：
width: calc(-100%);
有没有办法告诉LESS不要以这种方式编译并正常输出？
【问题讨论】：
:P
math 设置如何，Less 都不再折叠calc() 内的这些计算。
使用escaped string（又名转义值）：
width: ~"calc(100% - 200px)";
另外，如果您需要将 Less 数学与转义字符串混合使用：
width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");
编译为：
width: calc(100% - 15rem + 15px + 2em);
默认情况下，Less 将值（转义的字符串和数学结果）与空格连接起来。
【讨论】：
~"value" 语法已替换为e("value") 函数。见这里：lesscss.org/functions/#string-functions-e
~"" documentation 没有弃用通知。事实上，如果我正确阅读了e() function docs，那是e 函数已被~"" 替换。这个related answer 重申了这一点。
e() 文档中的警报。 ~'' 语法似乎更新了。
width~: calc(100% - 200px); 相当于：width: ~"calc(100% - 200px)";
除了使用my other answer 中描述的转义值外，还可以通过启用Strict Math 设置来解决此问题。
启用严格的数学运算后，只会处理不必要括号内的数学运算，因此您的代码：
width: calc(100% - 200px);
在启用严格数学选项的情况下会按预期工作。
然而，请注意严格数学是全局应用的，不仅在calc() 内部。这意味着，如果您有：
font-size: 12px + 2px;
Less 将不再处理数学运算——它将输出font-size: 12px + 2px，这显然是无效的 CSS。您必须将所有应由 Less 处理的数学运算包含在（以前不必要的）括号中：
font-size: (12px + 2px);
在开始一个新项目时，严格数学是一个不错的选择，否则您可能不得不重写大部分代码库。对于最常见的用例，other answer 中描述的转义字符串方法更合适。
【讨论】：
less({strictMath: true})
这是一个跨浏览器少的 mixin，用于将 CSS 的 calc 与任何属性一起使用：
.calc(@prop; @val) {
@{prop}: calc(~'@{val}');
@{prop}: -moz-calc(~'@{val}');
@{prop}: -webkit-calc(~'@{val}');
@{prop}: -o-calc(~'@{val}');
}
示例用法：
.calc(width; "100% - 200px");
以及输出的 CSS：
width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);
【讨论】：
ParseError: Syntax Error on line 2
calc，而且是任何其他可能使用的属性。
带变量的转义字符串示例：
@some-variable-height: 10px;
...
div {
height: ~"calc(100vh - "@some-variable-height~")";
}
编译成
div {
height: calc(100vh - 10px );
}
【讨论】：
Fabricio 的解决方案效果很好。
一个非常常见的 calc 用例是添加 100% 宽度并在元素周围添加一些边距。
可以这样做：
@someMarginVariable: 15px;
margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);
或者可以使用类似的mixin：
.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
@minusValue: (@marginSize+@paddingSize)*2;
padding: @paddingSize;
margin: @marginSize;
width: calc(~"100% - "@minusValue);
width: -moz-calc(~"100% - "@minusValue);
width: -webkit-calc(~"100% - "@minusValue);
width: -o-calc(~"100% - "@minusValue);
}
【讨论】：