在我在网上阅读的所有资料中,似乎CSS自定义属性和CSS变量是相同的.但是,在Mozilla Developer Network文档的"CSS变量的继承"部分的示例结尾处,有一个令人困惑的声明:
请记住,这些是自定义属性,而不是实际的CSS变量.该值在需要时计算,不存储以用于其他规则.例如,您不能为元素设置属性,并期望在兄弟的后代规则中检索它.该属性仅为匹配选择器及其后代设置,就像任何普通的CSS一样.
这让我觉得这两个概念不是同义词.
自定义属性和变量之间有什么区别？
CSS自定义属性与CSS 变量是一样的。但这似乎是一些笨拙的命名造成的。
他们为页面添加标题并没有错：使用 CSS 自定义属性（变量）
然而，CSS 变量并不是传统意义上的变量，因为无法像编程语言或 CSS 预处理器 (LESS/Sass) 那样定义它，使其具有全局作用域。
即使是根范围的自定义属性/变量也不是全局的。更改子级中的属性值不会更改上面的值或该范围的兄弟级的值。如果有人期望成为全球性的，这可能会引起混乱，我怀疑这就是 Mozilla 的作者试图指出的。
如果你看
该模块引入了一系列自定义作者定义的属性，统称为自定义属性
自定义属性是可以使用 引用的定义var(--my-custom-prop)。就像一个变量！
因为只需在自定义属性中更改一次值，并且更改将自动传播到该变量的所有使用。
尴尬……以上说法并不完全正确。Mozilla 开发者网络文档似乎正在尝试澄清这个想法，以使其不那么混乱。重复原来的引用：
请记住，这些是自定义属性，而不是实际的 CSS 变量。该值在需要时计算，而不是存储以供其他规则使用。例如，您不能为元素设置属性并期望在同级的后代规则中检索它。与任何普通 CSS 一样，该属性仅为匹配选择器及其后代设置。
他们指出它不是传统意义上的编程语言的变量。但它的计算方式就像样式一样，遵循 CSS 的一般级联/作用域规则。
因此，var(--my-custom-prop)可以根据声明的位置解析出非常不同的事物，并且声明不会传播到更高的范围。
如果您想尝试一下，可以使用这里的代码笔。
因此，将CSS 自定义属性视为与CSS 变量相同，但请务必记住值是级联的，并且没有全局范围。