A while ago we talked about SCSS and how it uses variables. But did you know you can also use variables in native CSS? Not many browsers supported it until now but now is the time to take a good look at it.
CSS Variables
First lets make a variable. The variable must be in the root and look like this:
:root {
–color1: #000;
–color2: #ffffff;
}
Here we give the variable a name and then a value. Color1 is the name and black the value. Now lets put it into use.
div{
color: var(–color1);
background-color: var(–color2);
}
So instead of a value we give the background color a variable. This way you can work faster when you have a large CSS file.