为什么这个 Less 表达式根据数学运算而成为语法错误？

我有以下 Less 片段：

@Foo: 50px;

.someClass {
    width: calc(~'(100% - @{Foo}' - 5px);
}

这很好用。但是，如果我将其更改为：

@Foo: 50px;

.someClass {
    width: calc(~'(100% - @{Foo}' + 5px);
}

我们现在有一个ParseError。我们使用的是稍旧版本的 Less，但我已经在官方少预览网站但它还是坏了。

这是一个错误还是我做了一些愚蠢的事情？

这是一个非常有趣的案例。下面的代码可以正常编译并在以下情况下产生预期的输出：--strict-math setting已打开（--strict-math=on).

@Foo: 50px;
.someClass {
  width: calc(e('(100% - @{Foo}') - 5px);
}
.someClass {
  width: calc(e('(100% - @{Foo}') + 5px);
}

当严格数学关闭（默认情况下）时，这两行都会导致编译器错误。下面给出了错误消息，它表明 Less 编译器正在尝试对内部值执行数学运算calc功能。这种激进的编译是 Less 编译器的已知行为.

操作错误：对无效类型进行操作

正如七阶段最大在他的评论中所证实的那样，e()函数（当严格数学打开和关闭时）是正确的，错误消息也符合预期。

理想情况下，应该看到与上述相同的行为~""语法也因为它是替代品e()。但不幸的是，似乎并非如此。无论是否启用严格数学设置，代码都无法编译，显示的错误消息如下：

ParseError：无法解析调用参数或缺少“）”

错误消息表明这是解析错误而不是操作错误。正如 seven-phases-max 所指出的，解析器似乎并不期望算术运算符遵循一个不是数字的值，因此会引发解析器错误。错误消息本来可以更友好:)

仅当操作员处于以下状态时才会出现此问题+ or *而不是当它是- or /. When - or /使用时，它们不能总是被视为数学运算符（因为-用于前缀和/用于font财产为line-height等），因此编译器将它们作为标识符处理，但是+ or *总是一个数学运算符，因此会导致问题。什么时候- or /使用时，它只会导致字符串连接。

下面是解决此问题的推荐方法，因为它不会让编译器认为必须执行某种数学运算（并将其留给用户代理作为 CSS 的一部分来处理）：

@Foo: 50px;
.someClass {
  width: calc(~'(100% - @{Foo} - 5px');
}
.someClass {
  width: calc(~'(100% - @{Foo} + 5px');
}

Note:缺少一个右大括号 ()）在计算函数中，但这与本例无关。