CSS自定义属性和CSS变量之间有区别吗? [英] Is there a difference between CSS custom properties and CSS variables?
问题描述
在我在线阅读的所有材料中，似乎CSS自定义属性和CSS变量是一回事.但是，在 CSS变量的继承的示例结尾处在Mozilla开发人员网络文档的部分中，有这样一个令人困惑的声明:
In all of the material I've read online, it appears that CSS custom properties and CSS variables are the same thing. However, at the end of an example in the Inheritance of CSS Variables section of the Mozilla Developer Network documentation, there is this confusing statement:
请记住，这些是自定义属性，而不是实际的CSS 变量.该值在需要的地方计算，不存储 在其他规则中使用.例如，您不能为 元素，并希望按照兄弟姐妹的后代规则进行检索. 仅为匹配的选择器及其属性设置属性 后代，就像任何普通的CSS一样.
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.
给我的印象是这两个概念不是同义词.
Which gives me the impression that these two concepts are not synonymous.
自定义属性和变量之间有什么区别?
What is the difference between custom properties and variables?
推荐答案
CSS自定义属性是 相同 > CSS变量.但这似乎是一些笨拙的命名.
A CSS Custom Property is the same thing as a CSS Variable. But that seems to come of some clumsy naming.
为页面添加标题没错:使用CSS自定义属性(变量)
They weren't wrong to title the page: Using CSS custom properties (variables)
但是，CSS变量不是传统意义上的变量，因为无法对其进行定义，因此无法像编程语言或CSS预处理程序(LESS/Sass)那样对其进行全局范围内的定义.
However a CSS Variable is not a variable in the traditional sense, as there is no way to define it so that it is globally scoped like in a programming language, or CSS Preprocessor (LESS/Sass).
即使根范围的自定义属性/变量也不是全局的.更改子级中的属性的值不会更改该范围之上或该范围的同级的值.如果有人期望全球化，那么可能会引起混乱，我怀疑这就是Mozilla的作者试图指出的.
Even a root scoped custom property/variable is not global. Changing the value of a property in a child will not change the value above or for siblings of that scope. If someone is expecting to be global, it may cause confusion and I suspect that's what Mozilla's writers are trying to point out.
如果您查看
此模块介绍了一系列自定义的作者定义的属性，统称为自定义属性"
This module introduces a family of custom author-defined properties known collectively as custom properties
自定义属性是可以使用var(--my-custom-prop)引用的定义.就像一个变量！
Custom properties are definitions that can be referenced using var(--my-custom-prop). Like a variable!
因为只需在自定义属性中更改一次值，该更改将自动传播到该变量的所有用途.
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开发人员网络文档似乎正在尝试澄清该想法，以减少混乱. 重复原始报价:
Awkward... The above statement is not true exactly. It seems Mozilla Developer Network documentation is trying clarify that idea so that it's less confusing. Repeating the original quote:
请记住，这些是自定义属性，而不是实际的CSS变量.该值在需要的地方计算，不存储用于其他规则.例如，您不能为元素设置属性并希望按照兄弟姐妹的后代规则来检索它.像任何普通的CSS一样，仅为匹配的选择器及其后代设置该属性.
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的一般级联/作用域规则.
They're pointing out it's not a variable in the traditional sense of a programming language. But that it is computed just like styles, adhering to the general cascade/scoping rules of CSS.
因此，var(--my-custom-prop)可以根据声明的位置来解决非常不同的事情，并且声明不会传播到更高的范围.
Thus var(--my-custom-prop) could resolve to very different things based on where it is declared, and that declarations don't propagate out to a higher scope.
如果您想尝试一下，请在这里一个可轻松使用的Codepen .
Here's a codepen to mess around with if you'd like to try it out.
因此，请考虑将 CSS自定义属性与 CSS变量相同，但是请务必记住，这些值是级联的，并且没有全局范围.
So think of CSS Custom Property the same as CSS Variable but be sure to remember that values cascade, and there's no global scope.
这篇关于CSS自定义属性和CSS变量之间有区别吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
