CSS is an evolving language. To stand out during an interview, it's good to show that you're keeping up with some of the latest features and one of the more useful features is variables.
- [Instructor] CSS is an evolving language, and to stand out here in an interview, it's good to show that you're keeping up with some of the latest features. And one of the most useful features upcoming in CSS is variables. So let's take a look at how they work, and how we can use them in an existing CSS file. Now the first think you need to know about this feature is that support is pretty good in most browsers, except for Internet Explorer. However, you can use variables today with the PostCSS plug-in, which will convert your CSS to work with older browsers.
Now that's something that you should already be doing for things like prefixes. Now to create variables, you defined a root rule and then put your variables inside that rule. Then, you can create different types of variables. Regular variables have two dashes in front of the name, or you can create custom variables with the @ sign in front of the variable name. In order to use the variables, you can use the var keyword and then your variable goes inside that var keyword with the two hyphens.
You can also use the apply rule for more complex variables. So let's take a look at how this works in an actual file, so here we have the project that we've been working on. And one thing I do want to remind you of, is that every one of these videos may have slightly different configurations, so if you are running a Gulp process, make sure that you clear it out and re-run it for every one of the videos. Or if it's easier for you, just use the practice environments, which have everything set up for you.
So what we want to do first is go all the way to the top of our CSS file and then create a section so it looks just like a rule, and this section is called root. And then in here we can create any of the variables we want. So let's go ahead and start with some colors. We'll go ahead and create a color called green, and I'm just going to copy this color right here. Clear it out. And since I'm going to be using that color, I'm going to go ahead and use it, and the way that you do that is by using this var keyword, and then the name of the color, right? And then I'll paste this color right here.
So now the background color for the buttons is going to be green by default. So you can see that nothing should change here, and just to test that out, let's go ahead and give this a different sort of color. So you can see that as soon as I change it, it updates, so it is working just fine. And this is pretty cool. Variables are really handy in CSS. So now, wherever we're using that green, we can use that variable instead. Now it looks like we're only using it in one place. So let's go ahead and create some other colors.
We'll create a red variable. And in the same way, I'm going to look for the color right here, and I'm going to use the variable keyword, and then use the red color, and then I'll paste that color in here. Go ahead and save that just to test it out. Let's go ahead and type in a different color here. You can see that these right now are looking pretty good, so I'll undo that to make them red again, and whenever I get to this color, though, this is essentially the same red color, but a little bit darker.
So I can take advantage of the ability to create modifications or color functions, and use them in variables. Let me show you how you do that. Instead of doing this color like this, we can use the color keyword, and this is like a function here. And then we're going to use our variable keyword in there and take the red color. And then use a space and then just add a shade of 20%. So I need to have two parenthesis right here, and let's go ahead and change this to green and save it, because it's going to show you sort of the difference.
So when I roll over, this is green now, and if I want to modify that back to red, I can do that. And I can even play around with these percentages. So there are a bunch of different color functions that you can use with this if you want to. So let's take a look at some other types of variables. So we've got red, green, and actually there is a beige color that I'm using here. And that's this one. So I'll go ahead and add another variable called beige here.
And I'll put that up here as well. And that looks pretty good. So there's some other types of variables that we can use, we can do our fonts if we wanted to with variables, but one of the things that we can do is create custom variables, and those are slightly different. You begin them with this @ sign, and then you can create either like a custom media query, so you can say custom-media, and I'm going to make this a rule that is a minimum width of less than or equal to 600 pixels.
And I'll create another custom variable here, another custom media variable. This one is going to be called max, and it's dash dash min and dash dash max, and then this one's going to be less than 600 pixels, or actually greater than 600 pixels. Let's give it some space here so that it looks nice. And now whenever we're using media queries, then we can use that variable, and it becomes just a lot easier to read.
So for example here, where we're doing in the BTN hamburger, instead of writing all this, we can just say media and use our min variable. And that is a lot easier to read. Let's go ahead and do some more, so like in the navbar, or actually in the container, here's another one, where we can use, let's just go ahead and copy this one 'cause it's a little quicker. And for the container, we'll also use at the minimum sort of media query break point.
Then we can do that one, and then for the navbar, instead of writing all that, we'll just use the max keyword here. And for this navbar hidden, same thing. We're going to use min on that one as well, and then for the a-hover, we'll use the min.
So it just becomes easier to read and also easier to update. If we wanted to change these values, then we have one place where we change them. Yeah, so if you get something like this, one of the things that you need to make sure is that you add a space right after the definition here and here, and that's going to fix that issue. So it is a little bit specific in the way that you have to code it. So if you take a look at it now, it works just like it did before. So that's great. Now we can also create what's called a custom selector, so this one's a little bit different but pretty useful also.
So you can say custom selector and we'll create a custom selector called headings for all of our headings level one, two, three, four, five and six. And what we can do then is use that to make some styles that modify all of our headings.
So we'll do dash dash, and I do need to put two dashes here. And do dash dash headings, and I can modify the headings here. So let's do margin-top zero, clear out the margin on the top, margin bottom one rem, and then we'll make the color different just so we can see that a change has happened. So we'll do red here and you do have to put that colon, actually.
This colon is part of the headings name. And you can see that that updates pretty well, so that's another really cool thing that you can do. And you can even create a variable that is more complicated than just a single line right here. So let's go ahead and grab this button, and we'll just get the whole thing and define sort of almost like a mix in. So we'll take this button, we will put it in this root section, we'll just put it in here somewhere.
And we'll just paste it. Let's go ahead and indent it. And we'll define it, though, as a variable, and then that variable can actually be a series of rules just like we did here. And then when we actually want to use that series of rules, we can go to this button hamburger and just ask it to go ahead and apply that variable we called btn.
This is going to apply all the rules from that variable, and then work just like before. So let's go ahead and change this button here to red, so you can see that it does work. And put it back to green. And everything works just like it did before, with a few minor changes to the style sheet. So really using these kind of things in your CSS shows that you're interested in staying with the cutting edge of what's happening with CSS, and this kind of stuff can really be useful in saving you some time when doing projects.
So here's some pages where you can get more information about working with variables, as well as some related courses with information on how to set up these things with Gulp JS, and use the PostCSS plug-ins in different useful ways. These courses go much farther than what I can do in these quick, short lessons. If you've got any questions that you've been asked or have asked in interviews, make sure you connect with me on Linked In or just about any social media network like Twitter, or GitHub, at planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.