5.5 CSS Variables

Hello and welcome back to the CSS of the future. The next future feature of CSS that I want to talk about in this lesson is another feature that you might be familiar with if you've ever used a a CSS preprocessor, like LESS or SAS. And that's the idea of using CSS variables. Now as of the time of this recording, there's very little support for CSS variables. In fact the only browser that natively supports it right now is Firefox. So Firefox is going to be our browser of choice for this particular lesson. And we'll get started by jumping into the project files folder, and opening up variables-start.html. And as you can see here we just have some simple text, a couple of links, a couple of headings. And then an unordered list at the bottom. Well in this lesson, I wanna take a look at how we can use CSS variables to facilitate the reuse of commonly used colors or values. So let's jump into our code. I'm gonna go to brackets here. And again here's our html, very simple, we just have a header, a paragraph with some links in it, another paragraph and an un-ordered list. So were gonna style up some of these, using variables. And the way we create a variable in CSS, and if you've never programmed before then you might not even know what a variable is. A variable is basically just a named storage location. So if you want to store a value such as a color or a number or anything. If you want to store it and use it over and over again, you can store it in what's called a variable. And a variable is simply a storage location with a name. And so we're going to create some variables here. And I'm gonna do it above our HTML and body rules here, and the way we're gonna do is we're gonna point to the root element by typing :root and then inside the curly brackets here, I'm gonna create a few variables. So let's say that we have a particular shade of blue that we want to use over and over again on our website. And if you've ever created a website with lots of CSS and multiple pages that are using the same color over and over again, then you know how frustrating it can be if you have to change that color at some point in the future. Maybe the designers want a slightly different shade of blue, or maybe they want to change the color scheme altogether. Well, if that's the case, then usually you would have to go through all of your CSS files and change the hex value for that color in every location that it appears. However, if we use variables, we can store that value in a variable and then we only have to change it in one place if it for some reason changes in the future. So, in the current specification for CSS variables, the way that we would create a variable is by using a custom property. And a custom property starts with two dashes. And then a name. So we're gonna give this a value of blue or a name of blue. So the name of our variable now is --blue. And then we would fill this out just like any other CSS property value pair. We would put a colon, space, and then the value we want to store in that variable. So the shade of blue we're gonna use here is 46a. So now we can refer to this value here using our variable. So let's try that out. Let's say we want our H1 tag to have that particular shade of blue. Let's come down here, just below our HTML and body tags. And let's create a rule for the h1 element. And let's give it a color of blue. And we don't wanna have to retype this hex value up here, so we're gonna use the variable. So, the way we refer to the custom property that we're using as a variable, here, as we type in the keyword, var. And then inside parenthesis we put the name of our variable which is --blue and then a semicolon to end your statement and a closing curly bracket. So now we can refer to this value up here simply by using this variable and the way we use that variable. It's by using this var method or var keyword. And inside parentheses we would use the name of that variable. So let's see if that works. I'm gonna save our file as and I'm gonna save it as variables.html and then we'll jump back into Firefox, and we'll navigate to variables.html and now we can see that our text here is that shade of blue that we were looking for. So now we can use that value over and over again. Maybe we wanted our links to be that same shade of blue. So we can go into our links and do the same thing. So, a { color: var(--blue); }, Save, and Refresh. And keep in mind that you don't have to use that just for the color property. You could use that for a background color. So maybe we want our links to have a background color of blue. And then we just want our foreground color. Let's go ahead and just nudge this down to the next line, so we can read it a little better. And then we want the color of the text itself to be white. So, let's save that, and refresh. And that didn't do the trick, so let's go back and see why. And it's because I didn't get rid of this color here. So sorry for the confusion there. So we have background color var blue, save that, that should do the trick there. So now our text is white and our background color is blue, so you can use that value, this 46A anywhere with any property that uses colors. So if we wanted maybe a lighter shade of blue we could do the same thing using a light blue variable and set it to a different value, maybe 8AF and we want to use that one for our links. So for our links here we would change that to light blue save that and refresh. And there you go, now our links have a lighter blue background color. Okay, so let's say we wanted another color for our H3s or whatever. So you get the basic idea. You would simply create your variable inside this route. And you could actually create it elsewhere. So let's say we wanted to create it inside the, in fact, let's go into our html here. And for this second section, lets put this inside a div, with a class of, and I'm going to call this maybe, feature. Something like that. And then we'll grab our closing div here, cut that and past it maybe after our paragraph here. So, then I'll grab this paragraph and H3, nudge those over a little bit so its a little bit easier to read, and there we go. So, now we have a div with a class of feature, we can make those variables local to that particular class by referring to that class here, so feature. And then for feature, we can set a value for our variable. So hyphen hyphen, and let's say we want it to be orange, and we're going to give it a value of F73. Then, I'm going to create a rule for the h3 element and we're going to give it a color of var hyphen hyphen orange. Lets see if that works. I'm going to save it, jump back over to Firefox and refresh. Sure enough it works, but let's see what happens if we put another h3 in our document. So just under our h1 up here, I'm going to add an h3 Just call it, sample heading, save that and refresh. And you'll see that it does not turn orange, even though we've applied that rule to the H3 element, it's not turning orange. And the reason for that is, we've declared the variable, inside this feature class, so this variable is only going to work Inside that class. It's only going to cascade down to the elements inside that feature class. And again we saw that here with our h3s. We created a color property, set the value to orange using this variable but it only applied to the one that was inside that particular div with a class of feature. So it's important to understand how that works. You can actually localize those variables by doing that. So let's take a look at one other thing. We've talked about using colors, but what else can we use as variables? What else can we store in a variable? Well, we can actually store a lot. Let's go to our root element again, and let's say that we have a particular type of border. That we're gonna be using over and over again. So let's call it gray border. We'll say -- and then grayBorder, and keep in mind that unlike other things in CSS, these variable names are case sensitive. So you need to make sure that you use the same capitalization when you declare the variable as you do when you actually use the variable later on. So, let's set our grayBorder variable to 1 pixel solid and then give it a color, maybe #999. Actually, let's bring that down a little bit, 888, to kind of a medium light gray. Semicolon at the end of that statement. So now we have this grayBorder variable. Let's use it on our unordered list here. So, we're gonna use a couple of things on our unordered list. First, let's use one of our color variables. We'll point to the orange one, --orange. And if we actually want that to work, we need to make sure that our unordered list is inside this div with a class of feature. So let's move that closing divs tag after our unordered list. And then we'll indent our unordered list a little bit more. And, now that we've done that, then we can create our borders. We'll set our border equal to, and again we're gonna use a variable, and remember we called it grayBorder. So I'm just gonna highlight that variable name here, copy it and then inside the parentheses for the var down here. We're gonna paste that. Close our parentheses. Semicolon to end that particular statement. Save our file. Jump back into Chrome or Firefox, excuse me, and refresh our page. So now we see that it has that border around it and our text is order. So we can store not only things like colors, we can also store things like borders. We can store number values. We can store font sizes, anything like that. So it's definitely fun to experiment with. We can't really use this in production yet because, like I mentioned at the time of this recording anyways, the only major browser that supports the use of CSS variables is Firefox. But hopefully in the future we'll start to see more support for it. Because it can save you a lot of time, especially when it comes to maintaining a site that's all ready been created because if you have all of your color values, if you're using the same orange or blue color over and over again, if you store that in a variable, it's gonna make it much easier to update in the future. So thank you again for watching and I'll see you in the next lesson.