使用 Less，CSS3 calc() 无法正常工作 [重复]答案

【问题标题】：Using Less, CSS3 calc() doesn't work correctly [duplicate]使用 Less，CSS3 calc() 无法正常工作 [重复]
【发布时间】：2014-10-10 18:48:06
【问题描述】：

当我直接在 Chrome 和 Firefox 的 Inspector 中使用此 calc(100% + 20px) 时，它工作正常，如图所示。

但是，当我将它插入到我的 less 文件中时，它会转换为 120%。我做错了什么？

【问题讨论】：

标签： css less

【解决方案1】：

Less 会尝试处理包括100% + 20px 在内的所有数学运算。

lessc -sm=on
lessc --strict-math=on

或使用 tilde-quote ~"100% + 20px" 以防止语句被 Less 处理。

例如：

.class {
    padding-left: calc(~"100% + 20px");
}

【讨论】：

我确实提到我已经在 CSS 上测试过它，结果相同。因此，我没有断定 LESS 是相关的，但是波浪号引号修复了它。谢谢！
感谢您的回答。严格数学似乎是正确的解决方案，应该是 less 的默认值。 tilda 引用（现在改为 e("")）解决方案看起来很老套，并且不包括诸如“calc(100% - @var)”之类的情况
@RamTobolski The tilda quote (now changed to e("")) 是什么意思？在LESS documentation 中，它完全相反：e: CSS escaping, replaced with ~"value" syntax.。
@JānisElmeris 我写的是我在实验中看到的，当时。你为什么不试试看。
@RamTobolski 这不是要尝试什么有效，什么无效。我以为您注意到使用 e("") 是新的/首选的方式，与之前使用 ~"" 的方式相同，尽管在我看来它是相反的方式。它们都应该可以工作，至少现在是这样。

【解决方案2】：

.class {
  padding-left: ~"calc(100% + 50px)";
}

如果你定义了一些变量，例如

@toolbar-height: 50px;

可以这样写

.class {
  padding-left: ~"calc(100% + @{toolbar-height})";
}

当您将 CSS 文件转换为 less 时，这不会产生任何问题

【讨论】：