使用 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 代表值的变量，例如 [=17] =],.

相反，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() 函数是必需的 - 它不提供“自定义属性” - 它提取自定义 [=58= 的值 ]属性目前正在持有并交付该价值。

进一步思考：

事后看来，我想知道如果 CSS 自定义属性 被调用：

CSS Custom Property Names

并且调用了相应的函数：

value()

所以语法将被写入和读出为：

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

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

例如：

width: value(height);

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

When using CSS Variables (CSS Custom Properties) why is the setting syntax and the getting syntax different?

css

css-variables

进一步思考：