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

【问题标题】：Why must a + or - be surrounded with whitespace from within the Calc() method?为什么必须在 Calc() 方法中用空格包围 + 或 -？
【发布时间】：2016-03-28 22:50:54
【问题描述】：

最近我开始在 CSS 中使用 calc(...) 方法。我很快了解到，width: calc(100%-2) 之类的代码将不起作用，尽管在 - 运算符前后添加空格可以解决问题，并且 calc 方法将正常运行。

在做了一些研究后，我发现多篇博客文章都提到了空格是必需的，许多人甚至指出了规范 (CSS3 8.1.1)，其中指出：

另外，+和-两边都需要空格运营商。（* 和 / 操作符可以不带空格使用在他们周围。）

现在，很明显，规范告诉我们这些运算符必须用空格包裹，但为什么呢？我已在规范中进一步阅读（通过第 8.1.2-4 节），如果在这些附加部分中进行了解释，我不理解其中的原因。

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

【问题讨论】：

我认为是这样，您可以在计算中使用负数。
@Festive 我不明白你为什么需要负数？
@FestiveTurnip 这不是一个好的假设。几乎不需要空格来区分二进制- 和一元-。你不会说没有其他语言要求你写3 - 2而不是3-2。
事实上，CSS 不需要在二元运算符周围使用空格，而是简单地禁止符号和数字之间的空格。这在任何地方都是如此，包括calc()、:nth-child(An+B) 和像-2em 这样的简单长度值。

标签： css css-calc

【解决方案1】：

- 字符是 CSS 标识中允许使用的字符之一。从给定here 的分辨率来看，他们似乎想防止在不使用空格的情况下使用- 可能产生的句法歧义，尤其是min-content 等关键字值（尽管@987654327 中还不允许使用AFAIK 关键字值@——如果我错了，请纠正我）。

Not everyone agrees 使用此分辨率。

【讨论】：

非常有趣。我想这可能是有道理的，但是一个好的解析器应该能够解决这些问题。（但也许不是，因为 CSS 不同于传统的计算代码（例如 C、C#、Java 等））我猜它们只是通过加号进入，因为 + 和 - 经常一起出现？跨度>
@RLH：您将如何解决min-content-2em 之类的问题？应该将其解释为单个标识（这几乎肯定会导致无效声明），还是应该在使用其余令牌之前不情愿地将 min-content 匹配为关键字值？我认为即使是人类读者也难以解析。
我明白你的意思。嗯，我认为在 idents 中允许 - 可能是不好的语法设计。把_ 到处乱扔有什么问题，相反，就像所有其他理智的语言一样！ :P 但是，我跑题了，我的 cmets 不在这个问题的范围内。
@RLH：真正的糟糕的设计是我们的键盘上只有一个 ASCII "hyphen-minus" 字符：P

【解决方案2】：

Mozilla Developer Network 解释得很好：

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

* 和 / 运算符不需要空格，但允许并建议添加空格以保持一致性。

【讨论】：

我认为这也是我感到困惑的地方。示例：考虑100% +2px，它可以解析为100% 2px。在上下文中，这没有任何意义。因此，任何存在 + 或 - 的情况（在 idents 中的 calc 函数) should be considered an associative operation (ignoring the whole usage of the -` 符号内）。同样，我可能在这里遗漏了一些东西，但我认为一个好的解释器至少可以正确解决加号签到？
如果我的 Sass/CSS Linter 能够捕捉到这一点，那就太棒了

【解决方案3】：

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

<CSSlength> := [<sign>]<module>[<unit>]

因此，例如，有效的 CSS 长度是：

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

像这样定义一个长度，CSS 引擎会解析以下内容：

calc(100% -1px);

作为一个长度，后跟另一个长度。在这种情况下，它将是100%，后跟-1px，这对calc() 根本没有意义。这在相对MDN documentation page中也有说明。

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

calc(100% - 1px);

【讨论】：