禁用 LESS-CSS 覆盖 calc()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17904088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable LESS-CSS Overwriting calc()
提问by AJStacy
Right Now I'm trying to do this in CSS3 in my LESS code:
现在我试图在我的 LESS 代码中的 CSS3 中做到这一点：
width: calc(100% - 200px);
However, when LESS compiles it is outputting this:
但是，当 LESS 编译时，它会输出以下内容：
width: calc(-100%);
Is there a way to tell LESS not to compile it in that manner and to output it normally?
有没有办法告诉 LESS 不要以这种方式编译它并正常输出它？
回答by Fabrício Matté
Using an escaped string(a.k.a. escaped value):
使用转义字符串（又名转义值）：
width: ~"calc(100% - 200px)";
Also, in case you need to mix Less math with escaped strings:
此外，如果您需要将 Less 数学与转义字符串混合使用：
width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");
Compiles to:
编译为：
width: calc(100% - 15rem + 15px + 2em);
This works as Less concatenates values (the escaped strings and math result) with a space by default.
默认情况下，Less 使用空格连接值（转义的字符串和数学结果）。
回答by Fabrício Matté
Apart from using an escaped value as described in my other answer, it is also possible to fix this issue by enabling the Strict Mathsetting.
除了使用我的其他答案中描述的转义值外，还可以通过启用Strict Math设置来解决此问题。
With strict math on, only maths that are inside unnecessary parentheses will be processed, so your code:
使用严格的数学运算，只会处理不必要括号内的数学运算，因此您的代码：
width: calc(100% - 200px);
Would work as expected with the strict math option enabled.
在启用严格数学选项的情况下会按预期工作。
However, note that Strict Math is applied globally, not only inside calc(). That means, if you have:
但是，请注意 Strict Math 是全局应用的，而不仅仅是在calc(). 这意味着，如果您有：
font-size: 12px + 2px;
The math will no longer be processed by Less -- it will output font-size: 12px + 2pxwhich is, obviously, invalid CSS. You'd have to wrap all maths that should be processed by Less in (previously unnecessary) parentheses:
数学将不再由 Less 处理——它会输出font-size: 12px + 2px显然是无效的 CSS。您必须将所有应由 Less 处理的数学括在（以前不必要的）括号中：
font-size: (12px + 2px);
Strict Math is a nice option to consider when starting a new project, otherwise you'd possibly have to rewrite a good part of the code base. For the most common use cases, the escaped string approach described in the other answeris more suitable.
在开始一个新项目时，严格数学是一个不错的选择，否则您可能不得不重写代码库的很大一部分。对于最常见的用例，另一个答案中描述的转义字符串方法更合适。
回答by Patrick Berkeley
Here's a cross-browser less mixin for using CSS's calcwith any property:
这是一个跨浏览器的少混入，用于将 CSScalc与任何属性一起使用：
.calc(@prop; @val) {
@{prop}: calc(~'@{val}');
@{prop}: -moz-calc(~'@{val}');
@{prop}: -webkit-calc(~'@{val}');
@{prop}: -o-calc(~'@{val}');
}
Example usage:
用法示例：
.calc(width; "100% - 200px");
And the CSS that's output:
以及输出的 CSS：
width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);
A codepen of this example: http://codepen.io/patrickberkeley/pen/zobdp
这个例子的代码笔：http://codepen.io/patrickberkeley/pen/zobdp
回答by Achim Koellner
Example for escaped string with variable:
带有变量的转义字符串示例：
@some-variable-height: 10px;
...
div {
height: ~"calc(100vh - "@some-variable-height~")";
}
compiles to
编译为
div {
height: calc(100vh - 10px );
}
回答by Sebastien Lorber
The solutions of Fabricio works just fine.
Fabricio 的解决方案运行良好。
A very common usecase of calc is add 100% width and adding some margin around the element.
calc 的一个非常常见的用例是添加 100% 的宽度并在元素周围添加一些边距。
One can do so with:
可以这样做：
@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);
Or can use a mixin like:
或者可以使用像这样的混合：
.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);
}
