使用CSS3 calc进行不太激进的编译

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

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

进入

这显然是不可取的。我想知道是否有一种方法可以向Less编译器发出信号，在编译过程中忽略该属性。我搜索了Less文档和两个编译器的文档，但什么也没找到

更少或更少的编译器支持这一点吗

---

如果没有，是否有CSS扩展程序可以执行此操作？

Less不再在

calc

中计算表达式

---

原始答案（

小于v1.x…2.x

）：

这样做：

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

---

在Less 1.4.0中，我们将有一个

strictMaths

选项，该选项要求所有Less计算都在括号内，因此

calc

将“开箱即用”。这是一个选择，因为这是一个重大的突破性变化。1.4.0的早期Beta默认启用了此选项。默认情况下，发布版本将其关闭。

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

---

有一种更整洁的方法将变量包含在转义计算中，如本文所述：

---

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

请注意，如果您使用twitter的休会期编译的内容较少，则需要关闭或重新打开转义引号。至少在写这篇评论的时候。我刚刚在less.css1.4.0中尝试了

calc（100%-50px）

，结果是

calc（50%）

。可怕的

~“…”

技巧仍然有效，但我被“开箱即用”的说法弄糊涂了，这让我认为上面的方法会奏效。Luke，对

calc

的支持在1.4.0以下如何变化？谢谢问题是为什么less.js一开始就试图计算这个？它应该为“100%-250px”抛出一个错误，因为它无法计算出一个合理的答案。对于未来的读者，您还可以仅转义运算符，从而使用变量。示例：

calc（@somePercent~“-”@someLength）

与其减少计算错误或抛出错误，为什么它不能意识到用户试图做什么，而不去管它？很明显，百分比和像素值不能在更短的时间内同时计算。你确定不希望编译器的攻击性更小吗？我也非常确定，希望编译器更具攻击性！（前一条评论中的双重否定让我困惑；）（因此我也投票支持下面的nice功能）

-o-calc-

。

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

@variable: 2em;

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