css - CSS3中计算操作数的LESS转义中的空白保留

Question

我想用LESS表达以下CSS：

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

因此，为了防止 LESS 尝试计算，我使用 LESS转义语法编写了表达式：

.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

您必须使用“ escape ”函数以不同的方式应用它：

第一个选项：

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

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

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

它们都将产生以下处理后的 CSS：

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