CSS variables are the up and coming new feature of CSS that allows you to define variables in your styles that can ripple through styles, and external sheets, and make CSS clean, maintainable, and easy to update.
You can define global variables by nesting them inside a :root selector and then using the — prefix for a variable name: value. Here’s an example of how to define variables.
:root {
--colors-primary: #336699;
}
Then to use that variable in your code throughout, simply call the var function and specify the name of the variable.
h1 {
color: var(--colors-primary);
}
If you want to know if your browser will support CSS variables, check out the caniuse website. Note that IE 11 does not support CSS variables, in case you have to work in a corporate environment.
