如何防止较少试图编译CSS calc()属性?

我正在使用的少编译器(OrangeBits和dotless 1.3.0.5)正在积极地进行翻译

body { width: calc(100% - 250px - 1.5em); }

成

body { width: calc(-151.5%); }

这显然不是我们所希望的。我想知道是否有一种方法向Less编译器发出信号，在编译期间基本上忽略该属性。我已经搜索了Less文档和两个编译器的文档，但我什么也找不到。

Less或Less编译器支持这一点吗?

如果不是，是否有CSS扩展器可以做到?

146216 次浏览

小开

最佳答案

从v3.00开始，Less默认不再计算calc中的表达式。

原来的答案(Less v1.x...2.x):

这样做:

body { width: calc(~"100% - 250px - 1.5em"); }

在Less 1.4.0中，我们将有一个strictMaths选项，它要求所有的Less计算都在括号内，因此calc将“开箱即用”地工作。这是一个选项，因为它是一个重大的突破性变化。1.4.0的早期测试版默认开启了这个选项。发布版本默认关闭该选项。

小开

calc的一个非常常见的用例是获取100%宽度并在元素周围添加一些边距。

你可以用:

@someMarginVariable = 15px;


margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);

小开

有几个转义选项具有相同的结果:

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }

小开

有一种更整洁的方法可以在转义的calc中包含变量，如本文所述:CSS3 calc()函数不工作与Less #974

@variable: 2em;


body{ width: calc(~"100% - @{variable} * 2");}

通过使用花括号，您不需要关闭和重新打开转义引号。