css - 如何防止 Less 尝试编译 CSS 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

默认情况下， Less 不再计算内部calc的表达式，因为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

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

@variable: 2em;

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

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