Question

现在我正在尝试在我的LESS代码中使用CSS3执行此操作：

width: calc(100% - 200px);

但是，当LESS编译时，它输出：

width: calc(-100%);

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

Answer 1

使用escaped string（a.k.a。转义值）：

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

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

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

编译为：

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

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

Answer 2

除了使用my other answer中所述的转义值之外，还可以通过启用Strict Math设置来解决此问题。

使用严格的数学运算，只会处理不必要的括号内的数学，所以你的代码是：

width: calc(100% - 200px);

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

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

font-size: 12px + 2px;

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

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

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

Answer 3

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

Answer 4

带有变量的转义字符串示例：

@some-variable-height: 10px;

...

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

编译到

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

Answer 5

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

禁用LESS-CSS覆盖calc（）

5 个答案: