如何防止 Less 尝试编译 CSS calc() 属性？

Posted 2023-02-14

【中文标题】如何防止 Less 尝试编译 CSS calc() 属性？

【英文标题】：How to prevent Less from trying to compile CSS calc() properties?

【发布时间】：2012-08-11 21:53:56

【问题描述】：

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

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

进入

body  width: calc(-151.5%); 

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

Less 或 Less 编译器支持这个吗？

如果没有，是否有 CSS 扩展器可以做到？

【问题讨论】：

您确定不希望编译器不那么激进吗？

我也非常肯定，希望编译器更加激进！ （上一条评论中的双重否定让我感到困惑；））（所以我也投票支持下面的好功能）

【参考方案1】：

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

@variable: 2em;

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

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

【参考方案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 的早期测试版默认启用此选项。发布版本默认关闭。

【讨论】：

请注意，如果您在 twitter 的闲暇时间编译较少，请使用 ignores this escaping。至少在撰写此评论时。

我刚刚在less.css 1.4.0中尝试了calc(100% - 50px)，结果是calc(50%)。令人敬畏的~"..." 技巧继续有效，但我对“开箱即用”的声明感到困惑，这让我认为上述方法可行。 Luke，Less 1.4.0 对calc 的支持有何变化？谢谢！

问题是为什么 less.js 一开始就尝试计算这个？它应该为“100% - 250px”抛出错误，因为它无法计算出合理的答案。

更新： 我看到有一个--strict-units 选项可以防止此类错误。太棒了！

对于未来的读者，您也可以只转义运算符，使您也可以使用变量。示例：calc(@somePercent ~"-" @someLength)

【参考方案3】：

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

可以这样做：

@someMarginVariable = 15px;

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

【讨论】：

-o-calc- is not supported yet.

【参考方案4】：

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

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