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

calc的一个非常常见的用例是采用100％的宽度并在元素周围增加一些边距。

可以这样做：

@someMarginVariable = 15px;

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

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中：CSS3 calc（）函数不适用于Less＃974

@variable: 2em;

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

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

有几种转义选项，结果相同：

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