CSS Variables
CSS3 supports native variables that are assigned with the following syntax:
html {
--foo-color: #FF0000;
--bar-color: #00FF00;
}
Note the -- that precedes the variable's name. Now, the <html> element and all its descendants will be able to access the variables with the following syntax.
a {
color: var(--foo-color);
}
button {
background: var(--bar-color);
}
CSS uses the var function to look up variables.
You don't have to assign the variable to the <html> tag. It can be assigned to any element or selector's style block. Just remember, only that element and its children will have access to the variable ;-)
Futhermore, you can access the variables in Chrome's DevTool/Element Inspector!
NOTE: This feature is not supported at all in Internet Explorer and only has partial support in Microsoft Edge 15, the most recent Edge at this time of writing. Opera Mini users are out of luck as well :-(
Tweet