CSS Variables



How can we use CSS variables?

The good news is that the learning curve for CSS variables is really shallow and they're straightforward to use. A CSS variable looks like this:

:root { --main-color: red; }
.your-element { color: var(--main-color); }

Whenever you want to color something red, you can use var(—main-color), and when you want to change from red to green or any other color, just update the value of the —main-color variable and all the instances where you have applied the variable will change accordingly.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License