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:
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?
A CSS Custom Property is the same thing as a CSS Variable. But that seems to come of some clumsy naming.
They weren't wrong to title the page: Using CSS custom properties (variables)
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).
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.
if you look at
w3.org's CSS Custom Properties for Cascading Variables
This module introduces a family of custom author-defined properties known collectively as custom properties
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.
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:
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.
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.
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.
Here's a codepen to mess around with if you'd like to try it out.
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.
I have looked at the page you have linked; they are trying to explain the "cascading" of css. They are saying that the style depends on a selector's parents, as opposed to being a set value as you would get in a variable.
The explanation attempts to clarify the difference between a css property and a vairable in programming languages. If you already understand css, you don't need to worry about this explanation.
If we look at the example they provide:
<div class="one">
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
</div>
If you give properties to class="two", they will be applied to class="three" and class="four".
If you re-use class="three" and class="four" within another class, like this:
<div class="five">
<div class="three"></div>
<div class="four"></div>
</div>
then they will inherit whatever properties you applied to class="five" with nothing to do with class="two".
This all assumes that class="three" and class="four" do not have their own properties. Let's say you assign the color red to class="three", then it will be red in both cases plus the properties inherited from its parent classes.
To be clear, the specification is called Custom Properties for Cascading Variables. The key is in the word "Cascading"; custom properties cascade, much like any other property with a few key differences.
In everyday usage, there is no difference between a "custom property" and a "CSS variable"; as far as authors are concerned, they're the same thing, just as "property" and "attribute" refer to the same thing in everyday usage even though the correct terms are "custom property" and "property" respectively (CSS doesn't have attributes; any reference to an attribute such as in attribute selectors and attr() refers to attributes in host languages like HTML).
The name "CSS Variables", the spec's URL slug css-variables, and the var() notation, are all just there to placate authors' clamors over the years for variable support in CSS. The spec never actually canonizes the term "CSS variable", even though it uses the word "variable" a couple dozen times throughout its prose to make itself easier for authors to understand (which is strange because CSS specs aren't intended to be read by authors).
As MDN explains, custom properties aren't true variables like that of programming languages or even CSS preprocessors, even though they have a lot in common. As mentioned above, cascading is what sets custom properties apart. Those traits that they have in common are what authors really are looking for in "variable" support in CSS, and they're good enough for most authors' needs.
That's why everyone just calls them "CSS variables", even though in reality it's a bit of a misnomer.
I believe that it simply means that if you have the following rules:
#foo{
--my-prop: 10px;
}
.bar{
height: var(--my-prop);
}
with the following HTML:
<div id="foo">
<div class="bar"></div>
</div>
<div id="sibling">
<div class="bar"></div>
</div>
then the height of the .bar div in the #sibling div is going to be 0, because the value of --my-prop is only inherited by descendants of #foo.
The language is confusing. I think the author is probably trying to draw a distinction between variables in procedural languages (like JS) versus Custom CSS Properties. You cannot set a property and use it anywhere, like you might with a variable in another language.
来源：https://stackoverflow.com/questions/48873595/is-there-a-difference-between-css-custom-properties-and-css-variables