LESS CSS 没有使用 calc() 正确翻译加法

Question

我有一个元素，我需要将 10 像素 (10px) 添加到百分比 (100%)。我正在使用内置的 CSS calc() 函数，它应该可以解决问题，但是当与 LESS CSS 结合使用时，它似乎会导致问题。

我有looked at this answer，但它不能解决问题。我找不到任何人都使用加号的场景，所以我无法在任何地方找到答案。唯一的例子是减号，而不是我需要的。

这是我的代码：

.element { width: ~"calc(100% + 10px)"; }

输出为：

.element { width: calc(100%+10px); }

在 Chrome 中...

它不起作用的原因是它需要加号周围的空格。我怎样才能让它工作？似乎没有办法保留这些空间。

Answer 1

您可以转义 calc 参数以防止它们在编译时被评估。

使用您的示例，您只需将参数括起来，如下所示：

calc(~'100% + 10px')

更少的代码

div {
   > span {
    width:calc(~'100% + 10px');
    }
 }

CSS 输出

div > span
{
  width: calc(100% + 10px);
}

检查下面给出的元素图像