在我在线阅读的所有资料中，CSS 自定义属性和 CSS 变量似乎是同一回事。但是，在 Mozilla 开发者网络文档的 Inheritance of CSS Variables 部分的示例末尾，有这样令人困惑的陈述：
请记住，这些是自定义属性，而不是实际的 CSS 变量。该值是在需要的地方计算的，而不是为 在其他规则中使用。例如，您不能为 元素并期望在兄弟的后代规则中检索它。 该属性仅针对匹配的选择器及其 后代，就像任何普通的 CSS 一样。
这给我的印象是这两个概念不是同义词。
自定义属性和变量有什么区别？
【问题讨论】：
标签： css css-variables
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) 引用的定义。像一个变量！
因为只需在自定义属性中更改一次值，更改将自动传播到该变量的所有用途。
尴尬... 上述说法并不完全正确。似乎 Mozilla 开发人员网络文档正在尝试澄清这个想法，以减少混乱。 Repeating the original quote：
请记住，这些是自定义属性，而不是实际的 CSS 变量。该值在需要的地方进行计算，而不是存储在其他规则中使用。例如，您不能为元素设置属性并期望在兄弟的后代规则中检索它。该属性只为匹配的选择器及其后代设置，就像任何普通的 CSS 一样。
他们指出它不是编程语言的传统意义上的变量。但是它的计算就像样式一样，遵循 CSS 的一般级联/范围规则。
因此，var(--my-custom-prop) 可以根据声明的位置解析为非常不同的事物，并且声明不会传播到更高的范围。
这里是a codepen to mess around with，如果您想尝试一下。
因此，CSS 自定义属性 与 CSS 变量 相同，但请务必记住值是级联的，并且没有全局范围。
【讨论】：
为了清楚起见，规范称为Custom Properties for Cascading Variables。关键在“级联”二字； custom properties cascade，与任何其他属性非常相似，但有一些关键区别。
在日常使用中，“自定义属性”和“CSS 变量”没有区别；就作者而言，它们是同一个东西，就像“属性”和“属性”在日常使用中指的是同一个东西，即使正确的术语分别是“自定义属性”和“属性”（CSS 没有属性；任何对属性的引用，例如属性选择器和attr() 指的是宿主语言（如 HTML）中的属性。
名称“CSS 变量”、规范的 URL slugcss-variables 和 var() 表示法，都是为了安抚作者多年来对 CSS 中变量支持的呼声。该规范从未真正规范术语“CSS 变量”，尽管它在其散文中多次使用“变量”一词以使作者更容易理解（这很奇怪，因为 CSS 规范不是为了阅读作者）。
正如 MDN 所解释的，自定义属性不是真正的变量，例如编程语言甚至 CSS 预处理器，尽管它们有很多共同点。如上所述，级联将自定义属性区分开来。它们的共同特征正是作者在 CSS 中的“变量”支持中真正寻找的东西，它们足以满足大多数作者的需求。
这就是为什么每个人都称它们为“CSS 变量”，尽管实际上它有点用词不当。
【讨论】：
custom values，因为它是动态操作的值，而不是property 本身。 CSS 属性 是固定的，不能自定义。 background:red - background[属性], red[值]
background:red [属性：值] | --color:red [自定义属性：值] | background:var(--color) [属性：将自定义属性评估为值]。 (1) 我们有 custom 属性 (2) 我们使用 var() 对其进行评估，这取决于自定义属性的 value 及其级联方式。没有人谈论操纵像background 这样的属性，但是像--color 这样的自定义 属性：自定义属性是普通属性，所以它们可以在任何元素上声明，用正常的继承和级联规则，...
--a:b的符号格式就像任何“常规”属性一样，只有-- 前缀，但从我看到的地方，一个属性有一个单一的目标，一个它旨在做的单一事情，而 that 是我论证的核心。示例：--x:5px 可以在很多 other 属性中以多种方式使用，因此将其命名为属性中的属性是不正确的（恕我直言），并使用术语“变量”更直观。这是一个源自不同观点的哲学讨论和。尊重
我查看了您链接的页面；他们试图解释 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"，那么在这两种情况下它都将是红色加上从其父类继承的属性。
【讨论】：
我相信它只是意味着如果你有以下规则：
#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>
那么#sibling div中.bar div的高度将为0，因为--my-prop的值只有#foo的后代继承。
语言混乱。我认为作者可能试图区分过程语言（如 JS）和自定义 CSS 属性中的变量。您不能设置属性并在任何地方使用它，就像使用另一种语言的变量一样。
【讨论】：