CSS Variables - What the?

Hi,

I have just started the theory section on CSS variables and I am not clear as to the advantage of it. In the first example, they show the following code:

:root {
–main-color: #3498db;
}

.button {
background-color: var(–main-color);
}

It seems like you have to write a lot more code to use a variable in this way. Not only do you need to state here what main color is under root, you have to type more characters than a color after background-color. Is this cleverness for its own good?

OK…so I get it now after starting the Build a City Skyline workshop. It gives you the ability to wholesale change a color across a whole website where the variables have been used.

Yeah, you definitely get to see the application of it with the Build a City Skyline project. In the theory lesson, nothing is mentioned. A paragraph could point the application out quite quickly.