使用CSS3 calc进行不太积极的编译

我正在使用的Less编译器（OrangeBits和dotless 1.3.0.5）正在积极地进行翻译

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

进入

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

这显然是不希望的。我想知道是否有一种方法可以通知Less编译器在编译过程中实质上忽略该属性。我搜索了Less文档和两个编译器的文档，但找不到任何东西。

更少或更少的编译器是否支持此功能？

如果没有，是否有CSS扩展器呢？

calc由于，默认情况下，Less不再计算内部表达式v3.00。

原始答案（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");}

通过使用大括号，您无需关闭并重新打开转义引号。