禁用LESS-CSS覆盖calc()

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

width: calc(100% - 200px);

然而，当LESS编译时，它输出如下:

width: calc(-100%);

有没有一种方法告诉LESS不要以这种方式编译它，并正常输出它?

115358 次浏览
小开
最佳答案

使用< >强转义字符串< / >强(也就是转义值):

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

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

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

编译:

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

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

小开

除了使用我的另一个答案中描述的转义值外，还可以通过启用严格的数学设置来修复此问题。

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

width: calc(100% - 200px);

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

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

font-size: 12px + 2px;

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

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

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

小开

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

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

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

提交答案