下面是一个跨浏览器的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);

本例的代码依赖:http://codepen.io/patrickberkeley/pen/zobdp

使用变量转义字符串的示例:

@some-variable-height: 10px;

...

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

编译,

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

下面是一个跨浏览器的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);

本例的代码依赖:http://codepen.io/patrickberkeley/pen/zobdp

法布里西奥溶液的效果很好。

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

除了在我的另一个回答中所描述的使用转义值外，还可以通过启用Strict Math设置来修复此问题。

对于严格的数学，只有不必要的括号内的数学将被处理，因此您的代码:

width: calc(100% - 200px);

在启用严格数学选项的情况下，将按预期工作。

但是，请注意Strict Math是全局应用的，而不仅仅是在calc()内部。这意味着，如果你有:

font-size: 12px + 2px;

计算将不再由Less处理——它将输出font-size: 12px + 2px，这显然是无效的CSS。你必须把所有应该由Less处理的数学运算都用括号括起来(之前是不必要的):

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

在开始一个新项目时，严格数学是一个很好的选择，否则您可能不得不重写代码库的很大一部分。对于最常见的用例，另一个答案中描述的转义字符串方法更合适。

使用转义字符串(也就是转义值):

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

此外，如果你需要将Less math与转义字符串混合:

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

编译:

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

默认情况下，Less将值(转义的字符串和数学结果)与空格连接起来。