css - Disable LESS-CSS Overwriting calc()

Question

Right Now I'm trying to do this in CSS3 in my LESS code:

width: calc(100% - 200px);

However, when LESS compiles it is outputting this:

width: calc(-100%);

Is there a way to tell LESS not to compile it in that manner and to output it normally?

Answer 1

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:

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.

Answer 2

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

启用严格的数学运算后，只会处理不必要括号内的数学运算，因此您的代码：

width: calc(100% - 200px);

启用严格数学选项后将按预期工作。

但是，请注意，严格数学是全局应用的，而不仅仅是在calc(). 这意味着，如果您有：

font-size: 12px + 2px;

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

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

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

Answer 3

这是一个跨浏览器的少 mixin，用于将 CSScalc与任何属性一起使用：

.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

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