使用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

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的早期测试版默认启用此选项.发布版本默认关闭它.

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

在转换计算中包含变量有一种更整洁的方法,如本文所述:CSS3 calc()函数不适用于Less#974

@variable: 2em;

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

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