禁用LESS-CSS覆盖calc()

现在我试图在我的LESS代码在CSS3中做到这一点:

width: calc(100% - 200px); 

但是,当LESS编译它正在输出这个:

 width: calc(-100%); 

有没有办法告诉LESS不要以这种方式进行编译并正常输出?

使用转义string (又名转义值):

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

此外,如果你需要混合较less的math与转义string:

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

编译为:

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

这个工作原理是默认情况下使用空格连接值(转义string和math结果)的值较小。

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

严格的math上,只有在不必要的括号内的math将被处理,所以你的代码:

 width: calc(100% - 200px); 

如果启用严格的math选项,将会按预期工作。

但是请注意,严格math是全局应用的,不仅在calc()内部。 这意味着,如果你有:

 font-size: 12px + 2px; 

math将不再被处理 – 它会输出font-size: 12px + 2px ,显然,这是无效的CSS。 您必须将所有应该由Less(以前不必要)括号处理的math进行换算:

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

严格的math是一个很好的select,当开始一个新的项目时要考虑,否则你可能不得不重写代码库的一大部分。 对于最常见的用例, 其他答案中描述的转义string方法更适合。

这里有一个跨浏览器的混合使用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); 

这个例子的codepen: http ://codepen.io/patrickberkeley/pen/zobdp

带variables的转义string示例:

 @some-variable-height: 10px; ... div { height: ~"calc(100vh - "@some-variable-height~")"; } 

编译

 div { height: calc(100vh - 10px ); } 

Fabricio的解决scheme工作得很好。

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); }