为什么必须在Calc()方法中用空格包围+或 - ？

最近我开始在CSS中使用calc(...)方法.我很快就知道代码如下:width: calc(100%-2)虽然在-操作符之前和之后添加空格来解决问题并且calc方法将正常运行,但是不起作用.

在做了一些研究之后,我发现有多篇博客文章提到白色空间是必需的,许多人甚至指出了规范(CSS3 8.1.1),其中指出:

此外,+和 - 运算符的两侧都需要空格.(*和/操作符可以在没有空格的情况下使用.)

现在,很明显,规范告诉我们这些运算符必须用白色空间包裹,但为什么呢？我已经在规范中进一步阅读(通过第8.1.2-4节),如果在这些附加部分中解释,我不理解推理.

简单来说,有人可以解释为什么指定它calc(100% - 1)甚至calc(100%/2)是可接受的语法但不是calc(100%-1)吗？

该-字符是CSS标识中允许的字符之一.从这里给出的分辨率来看,似乎他们想要防止因使用-没有空格而引起的语法歧义,尤其是关键字值如min-content(尽管AFAIK关键字值尚未被允许)calc()- 如果我错了,请纠正我.

但并非所有人都同意这一决议.

在Mozilla开发者网络解释了它相当不错:

注意:+和-运算符必须始终用空格包围.calc(50% -8px)例如,操作数将被解析为百分比,后跟负长度,无效表达式,而操作数calc(50% - 8px)是百分比,后跟减号和长度.更进一步,calc(8px + -50%)将其视为长度,后跟加号和负百分比.

在*与/运营商不需要的空白,但添加它的一致性是允许的,并建议.

我认为你应该首先考虑CSS如何识别长度.长度定义为可选符号,后跟模块和可选的度量单位(尽管许多属性实际需要它):

 := [][]

-3px
100em
+10pc
0
91
5%

calc(100% -1px);

calc(100% - 1px);