我正在使用的Less编译器(OrangeBits和dotless 1.3.0.5)正在积极地进行翻译
body { width: calc(100% - 250px - 1.5em); }
into
body { width: calc(-151.5%); }
这显然不是我们所希望的。我想知道是否有一种方法向Less编译器发出信号，在编译期间基本上忽略该属性。我已经搜索了Less文档和两个编译器的文档，但我什么也找不到。
Less或Less编译器支持这一点吗?
如果不是，是否有CSS扩展器可以做到?
当前回答
有几个转义选项具有相同的结果:
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");}
通过使用花括号，您不需要关闭和重新打开转义引号。
从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); }
