使用 CSS 变量（CSS 自定义属性）时，为什么设置语法和获取语法不同？

Question

使用 CSS 变量（CSS 自定义属性）时，为什么 设置语法 和 获取语法 不同？

如果我想为--my-custom-width 设置一个值，我将使用：

:root {
  --my-custom-width: 120px;
}

如果我希望获得--my-custom-width 的值，我将使用var() 函数来检索相同的值：

.my-div {
  width: var(--my-custom-width);
}

为什么我们不简单地写：

.my-div {
  width: --my-custom-width;
}

Answer 1

自 2017 年底以来一直在使用 CSS 自定义属性，我终于正确理解了它们的真正含义以及为什么需要 var() 函数...

它们不是（因为它们经常看起来是）旨在直接表示 CSS 值的变量。

CSS 自定义属性 正是他们所说的 - 它们是新的 CSS 属性，尚未（尚未）被赋值。

---

在 CSS 中，一个真正近似表示值的变量的例子是currentColor。

我们在这里看到currentColor 代表一个值：

.my-div {
  border: 1px dashed currentColor;
}

---

但 CSS 自定义属性 不是 CSS 变量，它们代表 值，例如 currentColor, .

相反，CSS 自定义属性 是新发明的，被命名为 null-value-properties...

... 以及那些新发明的、命名的、空值属性是完全可重用的。就像width、height、color 等一样，它们可能在不同的上下文中设置和重置值。

例如

/* My custom property is --my-custom-width but I want this
   property to hold different values in different contexts */

.left-two-thirds-of-page {
  --my-custom-width: 120px;
}

.right-third-of-page {
  --my-custom-width: 60px;
}

.my-div {
  width: var(--my-custom-width);
}

这就是为什么var() 函数是必要的——它不是交付“自定义属性”——它是提取自定义属性当前持有的值，然后交付它价值。

---

进一步的想法：

事后看来，我想知道如果 CSS 自定义属性 被调用，整个 名称-值关系 是否会更加清晰：

CSS Custom Property Names

并且相应的函数已被调用：

value()

所以语法会被写和读出为：

value(--my-custom-property-name)

---

通过扩展，我们不仅可以在自定义属性上使用value() 函数（或var() 函数），还可以在任何属性上使用。

例如：

width: value(height);