没有CSS使用calc（）

Question

我有一个元素，我需要在一个百分比（100％）中添加10个像素（10像素）。我使用构建的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')

LESS CODE

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

CSS OUTPUT

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

检查下面给出的元素图像