为什么我们必须将 css 变量包装到 var() 中？ [关闭]答案

【问题标题】：Why do we have to wrap css-variables into var()? [closed]为什么我们必须将 css 变量包装到 var() 中？ [关闭]
【发布时间】：2017-05-26 20:46:59
【问题描述】：

我正在学习新的css-variables 语法，我想知道为什么我们需要在变量周围放置var 语句：

.button {
    background-color: var(--bg-color);
}

据我所知，当您按原样放置变量时不会有任何歧义

.button {
    background-color: --bg-color;
}

为什么第二个选项不起作用？我真的很想用它，因为它看起来更干净，尤其是calc。

UPD。这更多是一个问题，为什么要开发当前的设计。例如，LESS 和 SASS 允许您放置没有var() 的变量。所以我想听听权衡，这导致 CSS 使用var()。

在公共资源中找不到有关此提案的任何讨论。任何链接也将不胜感激。

【问题讨论】：

您必须搜索 CSS 工作组的邮件列表，以找到他们关于 CSS 变量语法的讨论，了解每个人投票使用此语法的原因。这种问题（“为什么开发人员决定以这种方式做 X”）不是这里的主题。

【解决方案1】：

这是因为 var() 是一个检索变量值的函数。

【讨论】：

是的，我知道这是语法要求。我的问题是，为什么首先制定了这个要求？看起来很多余。
我明白你的意思。一般来说，根据我的经验，这是因为旧浏览器存在，如果他们看到类似 background-color: var(--blue-bkg) 的内容，他们会忽略它，但他们可能会成功解析类似 background-color: --blue-bkg 的内容以创建蓝色背景。
--blue-bkg 既不是hex 或rgba 也不是命名颜色。我相信每个变量的双破折号-- 足以保护向后兼容性。
@just-boris 这种语法并非史无前例。 calc() 也使用这种语法。在我看来，var() 还可以接受多个参数，从而为使用函数语法提供了更多理由；但这就是问题所在：整个主题都高度基于意见。