禁用LESS-CSS覆盖calc()函数

Question

现在我正在尝试在我的LESS代码中使用CSS3来实现这个效果：

width: calc(100% - 200px);

然而，当LESS编译时，它输出的结果是这样的：

width: calc(-100%);

有没有办法告诉LESS不要以那种方式编译它并正常输出？

- AJStacy

---

我认为我的解决方案已经是一个相当丑陋的黑客了，但最受欢迎的重复使用了几乎与我的黑客相同的方法，所以我想没有太多其他（更干净）的方法了。 :P - Fabrício Matté

请注意，Less不再根据math设置在calc()中折叠这些计算。 - Matthew Dean

Answer 1

使用转义字符串（又称为转义值）：

width: ~"calc(100% - 200px)";

---

此外，如果您需要将Less数学与转义字符串混合使用：

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

编译为：

width: calc(100% - 15rem + 15px + 2em);

这段代码的作用是将值（转义字符串和数学结果）默认以空格连接起来。

- Fabrício Matté

---

请注意，~"value" 语法已被 e("value") 函数替换。请参见此处：http://lesscss.org/functions/#string-functions-e - chharvey

@chharvey你确定吗？ ~""文档 上没有弃用通知。实际上，如果我正确地阅读e()函数文档，那么被替换为~""的是e函数。这个相关答案再次证实了这一点。 - Fabrício Matté

@FabrícioMatté 是的，你说得对。我误读了 e() 文档中的警告。~'' 语法似乎是较新的。 - chharvey

嗨，这里是Less.js语言的设计师。您对将语言语法进行微调以将整个语句解释为字符串有何看法？ 例如： width~: calc(100% - 200px); 等同于： width: ~"calc(100% - 200px)"; - Matthew Dean

@MatthewDean 在我看来，这似乎是一种改进。虽然我通常不喜欢有多种编写相同内容的方式——这是一个（不必要的）选择，你必须做出更多的选择，学习者必须记住更多的东西，并导致编码风格的讨论。当然，作为一名语言设计师，您肯定已经知道所有这些缺点，所以我会让您的团队讨论这种语法糖是否值得。而且，说实话，最近我很少使用calc/escaped字符串，因为我通常可以使用Flexbox布局以更简单和更强大的方式解决问题。 - Fabrício Matté

Answer 2

除了使用 我的其他答案 中描述的转义值外，还可以通过启用 严格数学 设置来解决此问题。

启用严格数学后，只有在不必要的括号内的数学才会被处理，因此您的代码：

width: calc(100% - 200px);

如果启用了严格数学选项，将按预期工作。

但是，请注意，严格数学是全局应用的，不仅适用于 calc() 内部。也就是说，如果你有：

font-size: 12px + 2px;

数学运算将不再由Less处理--它将输出font-size: 12px + 2px，显然这是无效的CSS。您需要用括号（以前不必要）包裹所有应由Less处理的数学运算：

font-size: (12px + 2px);

在开始一个新项目时，考虑使用Strict Math是一个不错的选择，否则你可能需要重写代码库的很大一部分。对于最常见的用例，other answer中描述的转义字符串方法更加合适。

- Fabrício Matté

---

要在例如gulp中启用严格的数学计算，请传递以下选项：less({strictMath: true})。 - Simon Epskamp

Answer 3

这是一个跨浏览器的 less mixin，可用于在任何属性中使用 CSS 的calc：

.calc(@prop; @val) {
  @{prop}: calc(~'@{val}');
  @{prop}: -moz-calc(~'@{val}');
  @{prop}: -webkit-calc(~'@{val}');
  @{prop}: -o-calc(~'@{val}');
}

使用示例：

.calc(width; "100% - 200px");

以及生成的CSS代码：

width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);

这个示例的 CodePen：http://codepen.io/patrickberkeley/pen/zobdp

- Patrick Berkeley

---

抛出 ParseError: 第2行语法错误 - Tom Roggero

@TomRoggero 你正在运行哪个版本的less？你的环境是什么？我已经更新了原始答案，包括一个可工作的示例。 - Patrick Berkeley

我建议不要这样做。最好保持你的CSS纯净，然后使用像Autoprefixer这样的工具来添加前缀，不仅限于calc，而是任何其他属性也可以使用。 - zeh

太棒了Patrick，我已经发起了一项针对LESS-Prefixer的PR以便将其并入。 - ekkis

Answer 4

带有变量的转义字符串示例：

@some-variable-height: 10px;

...

div {
    height: ~"calc(100vh - "@some-variable-height~")";
}

编译为

div {
    height: calc(100vh - 10px );
}

- Achim Koellner

---

而SCSS语法则可能是这样的： height: calc(100vh - #{$some-variable-height}) - Achim Koellner

Answer 5

Fabricio的解决方案很好用。

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

可以这样做：

@someMarginVariable: 15px;

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

或者可以使用类似于mixin的东西，例如：

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}

- Sebastien Lorber

---

你关于将变量传递到计算中的示例非常有帮助。这是我在阅读上述被接受答案后所提出的具体后续问题。 - Hynes

np，不过我觉得patrickberkeley的例子比我的更好 ;) - Sebastien Lorber

将calc和margin混合使用有什么意义？ - Dmitry

@Dmitry为什么不呢？如果你不能使用flexbox grow，又该如何在不使用那种技巧的情况下获取容器宽度的100%-20px呢？ - Sebastien Lorber