CSS 中是否有任何技术限制导致决定对变量使用 `--` ？

Question

随着 css 变量的引入，我想知道 为什么 -- 会被选作表示变种。

考虑到 CSS 具有半能力 calc 功能，我觉得 -- 很容易与其他语言中的减量运算符混淆。

我很好奇是否有任何历史意义或技术限制导致选择 --。当 CSS 标记通常是单数（#、.、@ 等）时，double 尤其让我感到困惑。此外，使用已被其他事物使用的符号也很有趣（尤其是当它对以 -- 开头的 class 名称有效时）。

示例：

@custom-media --lt-sm (width < 576px);
--grey300: #e0e0e0;

.navbarItem {
    display: inline-block;
    text-align: center;
    border-top: 1px solid var(--grey300);
    border-left: 1px solid var(--grey300);

    @media (--lt-sm) {
        flex-grow: 1;
    }

    &:last-child {
        border-right: 1px solid var(--grey300);
    }
}

免责声明

有些人可能会争论这个问题的有效性，但了解 为什么 是记住特定概念的关键技术。

我能找到的唯一相关讨论：

In the telcon today, we resolved to use a "--" prefix to indicate custom properties and other custom things.

We discussed whether the prefix is maintained or dropped when referring to the custom property from a var() function, but didn't actually resolve. Discussion in the call leaned toward dropping the prefix, like I do currently with var-* properties, but some side discussion with Simon and Sylvain argued for using the full name, as there are confusing cases like "--0" or "----".

So, while I understand the potential confusion caused by authors possibly thinking that var() can take any property name as an argument, I think it's overruled by the confusion over what needs to be escaped in various circumstances. Escaping rules are always very confusing to authors, so I'm going to go with "use the custom property name literally as the var() argument".

参考：

http://lists.w3.org/Archives/Public/www-style/2014Mar/0467.html

https://www.w3.org/TR/css-variables/#defining-variables

Answer 1

我认为这可能在某种程度上与供应商如何拥有自己的前缀有关，如果 browser/parser 无法理解连字符表示的属性，则会忽略这些前缀。我认为。这也是一种不会与任何其他 CSS 函数或已经存在的对象发生冲突的方法。

例如 LESS 这样的预处理器使用 @ 符号，而 SASS 使用 $ 象征。 Software Engineering SE 对此进行了讨论，并给出了相当不错的答案。

本质上，似乎是出于兼容性的考虑。有人可能会争辩说，与 & 符号和 % 符号等其他事物相比，表示什么是变量也很容易。

这里有一些 additional reading 关于 CSS 变量与 CSS 技巧的区别，其中包括香草 CSS、LESS 和 SASS 等

Answer 2

我的想法是它与向后兼容性有关。当您向 CSS 添加内容时，您不仅必须确保可以明确地解析语法，还必须确保新功能不会影响旧浏览器解析样式表部分的方式。其实能看懂。

由于变量可以在规则集中声明，一个连字符可能会导致与供应商前缀混淆。 class 选择器中的 class 名称实际上不允许以两个连字符开头，至少在 the CSS 2.1 spec.

中是这样

Answer 3

除了避免与其他答案中提到的以单个破折号开头的供应商前缀发生冲突外，请记住 CSS ident 的语法不允许字母、数字以外的任何内容、破折号和下划线（参见 CSS2 的 section 4.1.3）。如果自定义属性由任何其他符号表示，则每个现有的 CSS 实现都需要更新甚至重写其解析器，以适应用于自定义属性名称的任何符号。 ¹

来自 minutes of the telecon that's alluded to in the message, you can see that the hypothesis of avoiding clashing with vendor prefixes that begin with a single dash is true. The use of -- did require a minor parser change, because idents normally cannot start with double dashes（正如 klumme 指出的那样）。我不确定现有的实现是如何解析（d）声明的，但是可以安全地假设我的推理仍然成立：因为 idents can 以一个破折号开头，所以消耗第一个破折号不会立即导致解析错误，因此解析器可以确定它正在查看 <property> 还是 <custom-property-name>（或者然后如果没有遇到解析错误不支持自定义道具），然后再决定如何进行。

此更改也反映在 css-变量规范中，在 section 2 (which I also cover ):

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> production corresponds to this: it’s defined as any valid identifier that starts with two dashes.

之所以使用破折号是因为它们适合现有的语法，只需要对解析器进行微小的更改，并且特别加倍以防止与供应商前缀冲突（请注意，破折号和下划线对于供应商前缀是可以互换的，因此单个下划线不会'也不要剪掉它）。

¹ _{事实上，几周前我给了回应别人的问题，虽然他们的问题是'关于为自定义道具名称选择的前缀。}

CSS 中是否有任何技术限制导致决定对变量使用 `--` ？

Were there any technical limitations within CSS that led to the decision of using `--` for vars?

css

w3c

css-variables