CSS variables: they are very useful when you repeat the same value over and over in your style sheet.
Declare your variable once, and then call it as many times as you want. Where could this be more useful than in designing a color- theme?
For example you could use your variable for the border AND for the font color AND for the background.
This is how you declare your variable:
And when you call it, you do it this way:
You can even make a variable made of other variables! See this example from my demo:
--mainColor: var(--red), var(--green), var(--blue);
--secondaryColor: var(--blue), var(--red), var(--green);
(I used this in rgb format in the demo below)
You can say, well, we already have preprocessors variables. But what’s different and very interesting with CSS variables is that you can update it with css without having to reload the page!