Question

我想在LESS中表达以下CSS：

.a {
    min-height: calc(2em + 4px);
}

因此，为了防止LESS尝试计算，我使用LESS escaping syntax写了表达式：

.a {
    min-height: ~'calc(2em + 4px)';
}

然而，LESS的缩小引擎正在移除空白，并发出：

.a{min-height:calc(2em+4px);}

这是有问题的，因为webkit无法正确计算2em+4px，而2em_+_4px工作正常（为了清晰起见，添加了下划线。）似乎真正的错误在于webkit，因为我希望CSS3 calc的语法允许令牌之间不存在空格。

Answer 1

这是一篇很老的帖子，但我想为您展示一个简单的mathematic解决方法。

我的缩小引擎也有这个问题。我的减法工作正常，但除此之外还要删除空格。如果有人遇到同样的问题，这是最简单的解决方法。

如果你想要这个：

.a {
    min-height: ~'calc(2em + 4px)';
}

将其改为：

.a {
    min-height: ~'calc(2em - -4px)';
}

Answer 2

您必须使用＆＃34; escape＆＃34;功能以不同的方式应用它：

第一个选项：

.a {
    min-height:calc(~"2em + " 4px);
}

第二个选项：仅将转义字符~的使用限制为+符号：

.a {
    min-height:calc(2em ~"+" 4px);
}

它们都会产生以下处理过的CSS：

.a {
    min-height: calc(2em + 4px);
}