使用CSS3 calc进行较少积极的编译

Question

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

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

到

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

显然不希望这样。我想知道是否有办法向Less编译器发出信号，在编译期间基本上忽略该属性。我搜索了Less文档和两个编译器的文档，我找不到任何东西。

Less或less编译器是否支持此功能？

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

Answer 1

自v3.00以来，默认情况下，calc内的表达式不再评估{。}}。

---

原始回答（Less v1.x...2.x）：

这样做：

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

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

Answer 2

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

人们可以这样做：

@someMarginVariable = 15px;

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

Answer 3

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

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

Answer 4

在转化的calc中包含变量的方法更为简洁，如本文所述： CSS3 calc() function doesn't work with Less #974

@variable: 2em;

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

使用大括号，您不需要关闭并重新打开转义引号。