CSS 自定义属性和 CSS 变量之间有区别吗？

Question

在我在线阅读的所有 material 中，似乎 CSS 自定义属性和 CSS 变量是一回事。但是，在 Mozilla Developer Network 文档的 Inheritance of CSS Variables 部分的示例末尾，有这样一个令人困惑的语句：

Keep in mind that these are custom properties, not actual CSS variables. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling's descendant's rule. The property is only set for the matching selector and its descendants, like any normal CSS.

这给我的印象是这两个概念不是同义词。

自定义属性和变量有什么区别？

Answer 1

我相信这只是意味着如果你有以下规则：

#foo{
  --my-prop: 10px;
}

.bar{
  height: var(--my-prop);
}

与以下 HTML:

<div id="foo">
    <div class="bar"></div>
</div>

<div id="sibling">
    <div class="bar"></div>
</div>

那么#siblingdiv中的.bardiv的高度要为0，因为--my-prop的值只是继承#foo.

的后代

语言混乱。我认为作者可能试图区分过程语言（如 JS）中的变量与自定义 CSS 属性。您不能设置属性并在任何地方使用它，就像使用另一种语言的变量一样。

Answer 2

我查看了您链接的页面；他们试图解释 css 的 "cascading"。他们说样式取决于选择器的父级，而不是像您在变量中获得的设定值。

该解释试图阐明 css 属性和编程语言中的变量之间的区别。如果您已经理解css，则无需担心此解释。

如果我们看一下他们提供的示例：

<div class="one">
   <div class="two">
       <div class="three"></div>
       <div class="four"></div>
</div>
</div>

如果您将属性赋予 class="two"，它们将应用于 class="three" 和 class="four"。

如果你 re-use class="three" 和 class="four" 在另一个 class 中，像这样：

<div class="five">
       <div class="three"></div>
       <div class="four"></div>
</div>

然后他们将继承您应用于 class="five" 的任何属性，与 class="two".

无关

这一切都假设 class="three" 和 class="four" 没有自己的属性。假设您将红色分配给 class="three"，那么在这两种情况下它都会是红色加上从其父级继承的属性 classes.

Answer 3

一个CSS自定义属性是相同的东西 作为 CSS 变量。但这似乎来自一些笨拙的命名。

页面标题没有错：Using CSS custom properties (variables)

然而，CSS 变量不是传统意义上的变量，因为无法像在编程语言中那样定义它以使其具有全局范围，或者 CSS 预处理器 ( LESS/Sass)。

即使是根范围的自定义 property/variable 也不是全局的。更改 child 中属性的值不会更改上面的值或该范围的兄弟项。如果有人期望成为全球性的，它可能会引起混淆，我怀疑这就是 Mozilla 的作者试图指出的。

如果你看

w3.org's CSS Custom Properties for Cascading Variables

This module introduces a family of custom author-defined properties known collectively as custom properties

自定义属性是可以使用 var(--my-custom-prop) 引用的定义。像一个变量！

quote continued...

as one only has to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.

尴尬... 上面的说法并不完全正确。似乎 Mozilla 开发者网络文档正在尝试澄清这个想法，以减少混淆。 Repeating the original quote:

Keep in mind that these are custom properties, not actual CSS variables. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling's descendant's rule. The property is only set for the matching selector and its descendants, like any normal CSS.

他们指出它不是编程语言传统意义上的变量。但是它的计算就像样式一样，遵循 CSS 的一般 cascade/scoping 规则。

因此 var(--my-custom-prop) 可以根据声明的位置解决非常不同的事情，并且声明不会传播到更高的范围。

如果您想尝试一下，请点击这里 a codepen to mess around with。

所以想到CSS自定义属性和CSS变量一样但是一定要记住，值是级联的，没有全局范围。

Answer 4

需要说明的是，该规范称为 Custom Properties for Cascading Variables. The key is in the word "Cascading"; ，与其他属性非常相似，但存在一些关键差异。

在日常使用中，"custom property"和"CSS variable"没有区别；就作者而言，它们是同一件事，就像 "property" 和 "attribute" 在日常使用中指的是同一件事，即使正确的术语是 "custom property" 和 "property" 分别（CSS 没有属性 ；任何对属性的引用，例如属性选择器和 attr() 指的是宿主语言中的属性，例如 HTML).

名称 "CSS Variables"、规范的 URL slug css-variables 和 var() 符号，都是为了安抚作者多年来对变量支持的呼声在 CSS。该规范实际上从未将术语 "CSS variable" 封为正典，尽管它在其整篇文章中多次使用了 "variable" 这个词以使作者更容易理解（这很奇怪，因为 CSS 规范不适合作者阅读）。

正如 MDN 所解释的那样，自定义属性并不是像编程语言甚至 CSS 预处理器那样的真正变量，尽管它们有很多共同点。如上所述，级联使自定义属性与众不同。他们的共同特征正是作者在 "variable" 中真正寻找的 CSS 支持，它们足以满足大多数作者的需求。

这就是为什么每个人都称他们为 "CSS variables"，尽管实际上这有点用词不当。

CSS 自定义属性和 CSS 变量之间有区别吗？

Is there a difference between CSS custom properties and CSS variables?

css

css-variables