Css 为什么a+；或者-在Calc（）方法中被空格包围？

最近我开始在CSS中使用calc（…）方法。我很快了解到诸如：

width:calc（100%-2）

之类的代码将不起作用，尽管在

-

操作符前后添加空格将解决问题，并且calc方法将正常工作

在做了一点研究之后，我发现有多篇博客文章提到需要空白，许多人甚至指出了规范（），其中规定：

此外，+和的两侧都需要空格- 接线员。（可以在没有空格的情况下使用*和/运算符。） 在他们周围。）

现在，很明显，规范告诉我们这些操作符必须被包装在空白中，但是为什么呢？我已经阅读了规范中的更多内容（通过第8.1.2-4节），如果在这些附加部分中对其进行了解释，我不理解其中的原因

---

简单地说，有人能解释为什么指定

calc（100%-1）

甚至

calc（100%-2）

是可接受的语法，而不是

calc（100%-1）

？

-

字符是CSS标识中允许的字符之一。从给出的解决方案来看，他们似乎想防止由于使用不带空格的

-

而产生的语法歧义，特别是对于

min content

等关键字值（尽管

calc（）

-如果我错了，请纠正我）

不过，有了这个解决方案。

这个问题的解释非常好：

注意：

+

和

-

运算符必须始终用空格包围。例如，

calc（50%-8px）

的操作数将被解析为后跟负长度的百分比，这是一个无效的表达式，而

calc（50%-8px）

的操作数是后跟减号和长度的百分比。更进一步地说，

calc（8px+-50%）

被视为一个长度，后跟一个加号和一个负百分比

*

和

/

运算符不需要空格，但允许添加空格以保持一致性，建议这样做

---

我认为你应该首先考虑CSSs是如何识别长度的。长度定义为一个可选符号，后跟一个模块和一个可选的度量单位（尽管许多属性实际上需要它）：

：=[]

例如，有效的CSS长度为：

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

定义这样的长度时，CSS引擎将解析以下内容：

calc(100% -1px);

作为一个长度后接另一个长度。在这种情况下，它将是

100%

后跟

-1px

，这对

calc（）

毫无意义。这一点在《相对论》中也有解释

为了将两个长度关联起来，您需要使用不同的运算符，因此，按照上述逻辑，您需要使用空格：

calc(100% - 1px);

---

我想这是为了让你可以在计算中使用负数。@Festival我不明白你为什么需要负数？@FestiveTurnip这不是一个好的假设。几乎不需要空格来区分二进制

-

和一元

-

。你不会发现没有其他语言要求你写

3-2

而不是

3-2

。事实上，CSS不需要在二进制运算符周围使用空格，而是简单地禁止在符号和数字之间使用空格。这在任何地方都是正确的，包括

calc（）

，

：第n个子项（An+B）

和简单的长度值，如

-2em

。非常有趣。我想这是有道理的，但是一个好的解析器应该能够解决这些问题。（但可能不是，因为CSS不同于传统的计算代码（例如C、C、Java等），我猜它们只是通过加号，因为

+

和

-

经常一起使用？@RLH：您如何解决

min-content-2em

之类的问题？应该将其解释为单个标识（这几乎肯定会导致无效声明），还是在使用其余标记之前，不情愿地将

min content

匹配为关键字值？我想即使是人类读者也会很难解析它。我明白你的意思。嗯，我认为在ident中允许

-

可能是糟糕的语法设计。相反，像其他任何一种理智的语言一样，到处乱扔

\uuu

有什么不对P但是，我离题了，我的评论超出了这个问题的范围。@RLH：真正糟糕的设计是我们的键盘上只有一个ASCII字符：我想这也是我感到困惑的地方。示例：考虑<代码> 100% +2px < /代码>，它可以解析为<代码> 100% 2px。在上下文中，这没有任何意义。因此，任何存在

+

或

-

的情况（在计算函数

中）都应该被视为一种关联操作（忽略标识中符号的整个用法）。同样，我可能遗漏了一些东西，但我认为一个好的解释器至少可以正确地解析加号？如果我的Sass/CSS Linter能够捕捉到这一点，那就太棒了