7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 8Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 What Are CSS Variables?

In this lesson, you’ll learn what CSS variables are all about and why you should use them. We’ll discuss basic usage, naming, and browser compatibility, and you’ll see some simple examples that demonstrate the power of using these variables. Let’s go.

Related Links

2.1 What Are CSS Variables?

Welcome back to the course. In this lesson, you'll learn what CSS variables are all about, and also why you should use them. We'll discuss naming, basic usage, browser compatibility. And you will also see some simple examples that demonstrate the power of using these variables. So, let's get started. So right here I've prepared a simple demo for you it's a card that has an icon, a title, a table, and two buttons. And you can see the HTML the markup for it, right here it's nothing fancy really. But I think it's a good example to show you some of the principles behind CSS variables. So let's take a look at the CSS. As you can see, I'm not using any preprocessor here is just vanilla CSS. Now if we look at the style sheet, you'll see that there are some values of some elements that are repeating themselves. For example, the border radius. This has a value of five pixels here and we can find it on the card, but also on the button, right here? Also this color 0176b8, we can find this in multiple places. So we have it on the border of the button, we have it as a background color. We also have it as the main color for our anchor tags. And we also have it down here on the inverse button. We're using it here, here. We also use it to color this icon, like so. So it shows up in multiple places. On these images on the table we're also using the same value for the width and height 2.5 ramps. Now, imagine you have a style sheet like 10 times bigger than this. And you're gonna keep reusing those values over and over again on other elements. And at some point, you're gonna have to change some of these values, what do you do? Well, it'll probably do a find and replace, which could work, but there is actually a much better and easier way of doing that. And that is by using CSS variables. So here's how you get started. Most of the time, you want to define your variables inside the root pseudoclass. This applies to the entire HTML document. And to define a variable you will start with a double hyphen and then the name of the variable. Let's say color -primary; and you'd put in the value. In my case I want to use, This blue color. So I'm gonna paste it right here and that's it. You've now just defined a variable. Now to use that variable in your CSS code, you will need to replace that value with var, open parenthesis and inside, The name of your color. So it's actually color, primary and the name of the variable I meant to say. Now, all the links will use the color that I defined here in my variable. And I can easily replace this in one place and all the elements that use that variable will get updated as well. That's pretty cool, isn't it? Now all I have to do is replace, the hard coded versions or values, or occurrences of that color with my variable. So we'll replace it here we'll replace it here, Here, here, Here and that's it. So now, all of these elements are using my variable or my custom property instead of a hard coded value. So now you'll see that if I change this value, now everything is green instead of blue, which is pretty cool. Now imagine as I was saying earlier, doing this in a large stylesheet. Now you don't have to do find a replace, you can just change a single value at the top of your style sheet then everything else will be updated automatically. How cool is that? Now, what else can I transform into a variable? How about this border radius, right? I can define another one here. And I'm gonna say global radius, it's five pixels. And now I just need to replace this with var, global radius. And let's go ahead and copy that. And we're also gonna go to the button and replace it here, right? So same thing. Now if I wanna change this radius, I can say 15 pixels here. And it's gonna update the card itself and also the buttons. Let's leave this at five. We can also use this technique for proportional resizing. So for example, this table IMG contains the same value, or has the same value of 2.5 ramps for both the width and the height. But I can easily change this with var, let's say avatar size. And I'm gonna do the same here. Now currently this doesn't work because I didn't define my avatar size. So let's go in and do that right now. So avatar size 2.5 ramps. All right, so now that's back in place. And I was talking about proportional resizing. That means, I can very easily change one value, and now both the width and the height of the element will be affected. So that's basically how you can define and use CSS custom properties or they're also called variables. Now let's talk a little bit about naming these variables. To make sure a CSS variable has a valid name, it should contain alphanumeric characters, underscores and dashes. And that's it. So alphanumeric characters means digits, and letters, and then underscores and dashes like I used here. And also please note that CSS variables are case sensitive. So, If I say avatar size, All right, this is a different variable than the one above it. I can also define it like so. So with no dash, I can use an underscore, that's also correct. This is an alphanumeric, so I can use digits as well. I can say avatar size, one, for example, I can say 123_ -avatar size. That's also valid because it only contains alphanumeric characters, underscores and dashes. It is not correct if I do something like this. So if I add a space that's gonna be an incorrect decoration. Or if I decide to use characters like so that's also incorrect, these are not allowed. All right, so let's go ahead and delete that. And finally, let's take a moment to discuss browser compatibility. For that let's go ahead and open Can I use, and we'll search for custom properties. So CSS variables custom properties. As you can see pretty good support in all major browsers. It is not supported in Internet Explorer, well, big surprise there, but it is supported in edge, its replacement. And of course Firefox, Chrome, Safari all of them supported apart from Opera Mini. And some other less used browsers, like this QQ browser and Baidu, which I had never heard of, to be honest. But the ones that were interested in Edge, Firefox, Chrome, Safari, Opera, all supports CSS variables, so that is pretty good. All right, so now that you are better acquainted with CSS variables, let's go ahead and talk about two very important aspects, scoping and inheritance. We'll do that in the next lesson. So, I'll see you there.

Back to the top