随着CSS vars的引入，我想知道为什么选择的推理为何将 --选择作为表示VAR的一种方式。
考虑CSS具有半功能calc功能，我觉得--很容易被其他语言的减少操作员混淆。
我很好奇是否存在任何导致--的历史意义或技术限制。当CSS标记通常为单打（＃，。， @等）时，双重的双重使我感到困惑。同样，使用其他事物已经使用的符号也很有趣（尤其是当其有效的类名称以--开头时）。
示例：
@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);
}
}
免责声明
有些人可能会争论这个问题的有效性，但是了解为什么是记住特定概念的关键技术。
我唯一可以找到与之相关的讨论：
在今天的Telcon中，我们决心使用" - "前缀来指示 自定义属性和其他自定义事物。
我们讨论了前缀是维护还是丢弃 从var（）函数引用自定义属性，但没有 实际解决。通话中的讨论倾向于放弃 前缀，就像我当前使用var-*属性一样，但是某个方面 与Simon和Sylvain的讨论主张使用全名，作为 有令人困惑的情况，例如" -0"或" ----"。
所以，虽然我了解作者引起的潜在混乱 可能认为var（）可以将任何属性名称作为一个 论点，我认为这被所需的困惑所淹没 在各种情况下被逃脱。逃避规则总是非常 使作者感到困惑，所以我要使用"使用自定义属性 字面名称为var（）参数"。
参考：
http://lists.w3.org/archives/public/www-style/2014mar/0467.html
https://www.w3.org/tr/css-variables/#defining-variables
在避免与供应商前缀发生冲突之上这是从其他答案提到的单个破折号开始的，请记住，CSS Ident的语法除字母，数字，破折号和下划线外不允许其他任何内容（请参阅CSS2的第4.1.3节）。如果要用任何其他符号表示自定义属性，则每个现有的CSS实现都需要更新甚至重写其解析器，以适应用于自定义属性名称的任何符号。 1
从消息中提到的电信的会议记录中，您可以看到避免与以单个破折号开头的供应商前缀发生冲突的假设是正确的。--的使用确实需要较小的解析器更改，因为通常无法以双重破折号开始（如Klumme指出的那样）。我不确定现有的实施如何解析（d）声明，但是可以肯定地假设我的推理仍然存在：因为cantents can can can 从一个破折号开始，因此消耗第一个破折号不会立即导致解析错误，因此解析器可以确定其查看<property>或<custom-property-name>（或然后 如果不支持自定义道具）在确定应该如何进行之前会遇到解析错误。p>此更改也反映在第2节中的CSS-Variables规范中（我在此处也介绍）：
a 自定义属性是其名称以两个破折号（U 002D连字符）开头的任何属性，例如
--foo。<custom-property-name>生产对应于此：它定义为以两个破折号开始的任何有效标识符。
因此，使用破折号是因为它们适合仅带有轻微的解析器更改的现有语法，特别是为了防止与供应商前缀发生冲突（请注意，破折号和下划线可用于供应商前缀，因此单个下划线不会切割它也）。
1
我认为，它可能以某种方式与供应商的前缀相关，如果浏览器/解析器不了解连字符属性，则忽略了连字符的属性。我认为。这也是一种不会与已经存在的任何其他CSS函数或对象发生冲突的方法。
例如， simel 的预处理器使用 @符号，而 sass 使用 $符号。这是在软件工程SE上进行了讨论的，它可以与之相处。
本质上，似乎是出于兼容原因而不是其他原因。有人可能会说，与&符号和%符号（
这是关于CSS变量在CSS技巧上的差异的额外阅读它与向后兼容性有关。当您向CSS添加一些内容时，您不仅必须确保可以明确地解析语法，还必须确保新功能不会影响旧浏览器的旧浏览器的方式，以解析他们实际上能够理解的样式表的部分。
由于可以在规则集中声明变量，因此一个连字符可能会引起与供应商前缀的混淆。实际上，通常不允许使用两个连字符的类选择器中的类名称，至少在CSS 2.1规格中。