Question

在我在线阅读的所有资料中，似乎CSS自定义属性和CSS变量是相同的。但是，在Mozilla Developer Network文档的Inheritance of CSS Variables部分的示例结尾处，有一个令人困惑的声明：

请记住，这些是自定义属性，而不是实际的CSS 变量。该值在需要时计算，而不是存储用于其他规则。例如，您无法为其设置属性元素，并期望在兄弟的后代规则中检索它。该属性仅为匹配选择器及其设置后代，就像任何普通的CSS一样。

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

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

Answer 1

CSS自定义属性是 CSS变量。但这似乎是一些笨拙的命名。

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

然而，CSS变量不是传统意义上的变量，因为无法定义它以使其像编程语言或CSS预处理器（LESS / Sass）一样全局范围。

即使是根作用域的自定义属性/变量也不是全局的。更改子项中属性的值不会更改上面的值或该范围的兄弟节点。如果有人期望成为全球性的，那么可能会引起混淆，我怀疑Mozilla的作者正试图指出的是什么。

如果你看看

w3.org's CSS Custom Properties for Cascading Variables

此模块介绍了一系列自定义作者定义的属性，这些属性统称为自定义属性

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

quote continued...

因为只需要在自定义属性中更改一次值，并且更改将自动传播到该变量的所有使用。

尴尬...... 以上陈述并非完全正确。似乎Mozilla开发者网络文档试图澄清这个想法，以免它变得混乱。 Repeating the original quote：

请记住，这些是自定义属性，而不是实际的CSS变量。该值在需要时计算，不存储以用于其他规则。例如，您不能为元素设置属性，并期望在兄弟的后代规则中检索它。该属性仅为匹配选择器及其后代设置，就像任何普通的CSS一样。

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

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

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

因此，将 CSS自定义属性与 CSS变量相同，但请务必记住值级联，并且没有全局范围。

Answer 2

我看过你关联的页面;他们试图解释css的“级联”。他们说风格取决于选择者的父母，而不是你在变量中获得的设定值。

该解释试图澄清css属性与可编程语言之间的差异。如果您已经了解css，则无需担心此解释。

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

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

如果您向class="two"提供属性，则会将其应用于class="three"和class="four"。

如果您在其他课程中重复使用class="three"和class="four"，请执行以下操作：

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

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

这都假设class="three"和class="four"没有自己的属性。假设您将红色指定为class="three"，那么在加两种情况下它将从其父类继承的属性为红色。

Answer 3

为清楚起见，该规范称为Custom Properties for Cascading Variables。关键在于＆＃34; Cascading＆＃34 ;; custom properties cascade，与任何其他具有一些关键差异的财产非常相似。

在日常使用中，＆＃34;定制属性＆＃34;和一个＆＃34; CSS变量＆＃34 ;;就作者而言，它们是相同的，就像＆＃34;属性＆＃34;和＆＃34;属性＆＃34;在日常使用中指的是相同的东西，即使正确的术语是＆＃34;定制属性＆＃34;和＆＃34;财产＆＃34;分别（CSS 没有属性;对属性选择器和attr()等属性的任何引用都是指HTML等主机语言中的属性。

名称＆＃34; CSS变量＆＃34;，规范的URL slug css变量和var()符号都可以安抚作者和＃39;多年来为CSS中的变量支持而吵闹。规范从来没有实际上将术语＆＃34; CSS变量＆＃34;用尽，尽管它使用了＆＃34;变量＆＃34;在整篇散文中有十几次让作者更容易理解（这很奇怪，因为CSS规范并不打算被作者阅读）。

正如MDN解释的那样，自定义属性不是编程语言甚至CSS预处理器的真正变量，即使它们有很多共同之处。如上所述，级联是将自定义属性分开的原因。他们共同的那些特征是作者真正在寻找的变量＆＃34;变量＆＃34;在CSS中支持，对于大多数作者而言，它们已经足够好了。需要。

这就是为什么每个人都只是打电话给他们＆＃34; CSS变量＆＃34;，即使实际上它有点用词不当。

Answer 4

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

#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>

然后.bar div中#sibling div的高度将为0，因为--my-prop的值仅由#foo的后代继承。< / p>

语言令人困惑。我认为作者可能试图区分过程语言（如JS）和Custom CSS Properties之间的变量。您不能设置属性并在任何地方使用它，就像您可能使用另一种语言的变量一样。

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

4 个答案: