关于CSS：使用CSS3 Calc减少主动编译


Less aggressive compilation with CSS3 calc

我正在使用的Less编译器(OrangeBits和无点1.3.0.5)正在积极地进行翻译

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

成

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

这显然是不希望的。 我想知道是否有一种方法可以通知Less编译器在编译过程中实质上忽略该属性。 我搜索了Less文档和两个编译器的文档，但找不到任何东西。

更少或更少的编译器是否支持此功能？

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

相关讨论

自v3.00以来，Less不再默认在calc内部计算表达式。

原始答案(Less v1.x...2.x)：

做这个：

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

在Less 1.4.0中，我们将提供一个strictMaths选项，该选项要求所有Less计算都在方括号内，因此calc将"开箱即用"。 这是一个重大突破，因此是一个选择。 1.4.0的早期测试版默认情况下启用此选项。 发行版本默认情况下将其关闭。

相关讨论

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

一个人可以这样做：

1
2
3
4
5
6
@someMarginVariable = 15px;

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

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

1
2
3
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

1
2
3
@variable: 2em;

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

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