CSS Variables

[00:00:00]
>> All right, so just like I promised that we would talk about, there's also CSS variables. Now these aren't directly related to animations but we're going to be using them throughout all of our examples. CSS variables are also known as CSS custom properties, and that's because they behave like properties.

[00:00:19]
They could be inherited, they're sort of like variables, and conceptually, you could think of them as variables, but the important thing to remember is that they are inherited and they also cascade. So you could overwrite them depending on specificity and things like that. So the way that we write CSS properties or CSS custom properties or CSS variables is that you first add a double dash.

[00:00:48]
And so this double dash, let me choose a different color, yeah, that's fine. So this double dash is what signifies to CSS that this property is custom, it's not the built in property, it's one of my own properties. And these are case sensitive by the way, and then you just give it a name.

[00:01:09]
Now, I picks duration here, but you could call it anything you want, you could call it dur or my duration or animation time, just whatever you want to call it, it's completely up to you. And then just by convention, I put it in the root, you could also put it on the HTML elements or the body.

[00:01:29]
Typically the roots in HTML documents is going to be the HTML element itself, and so you then specify some property for that custom CSS variable. Now, actually using the CSS variable you do by, actually I don't know why calc is here it doesn't need to be but we'll talk about that in a minute.

[00:01:53]
But you could use the CSS variable by passing in var V-A-R, opening your parentheses and passing the variable in. And then as an optional second argument, you could specify what the value the evaluated value of this property should be if we have no value for this CSS variable.

[00:02:15]
So just to show you an example, and we'll go back to our scratchpad over here. I am going to edit the styles a bit. So again, by convention, we're gonna be doing this in roots. And just for starters, we're going to be doing colors, so let's call this primary color and we're gonna do red.

[00:02:42]
Okay, so the background color of the body right now is some hard coded color over here, but instead, we're gonna put var or var. I don't know why people call it var, it's not variable it's variable, but anyway, and then we are gonna type in primary color. Okay, so now you're going to see that this is now a disgusting red, so let's add a foreground color and this is going to be whites, and so I could just say color, var foreground color.

[00:03:19]
Okay, cool, that's a little bit better, of course this circle is very, very hard to see, but yeah that just gives you an idea of how to use CSS variables. Now let's say that, let's make this variable, let's make this navy or I could even pick a custom variable here.

[00:03:40]
Let's say that we didn't have a foreground color. So the problem is, this is going to fall back to the browser defaults or the normal uninherited value of the property. So the color is going to end up as black in this case. You could also specify a default just like we talked about, and so let's say that I put white in here.

[00:04:05]
Now because FG color doesn't really evaluate to anything, it's going to go for the default that we specified, which is white. And you could also inspect these by, let's hover here, see the body. We can see in the dev tools that if we hover over for example var primary color, you really can't see that but there is a tooltip under that primary color that tells you exactly what that color value is.

[00:04:35]
So in Chrome Dev Tools, you could actually click into that and see this variable and then change it. So we could change it to green, or this disgusting orange color, let's go like red or something like that, and you could see a change throughout the site. So, CSS custom properties are really, really useful, and they're not only useful as a way of sharing styles, but they're useful for actually being manipulated with JavaScript as well.

[00:05:10]
So, besides just the CSS thing, we also have a JavaScript API for changing these variables. And so on any elements, we could call the element.style.setProperty and we pass it that color, you can do this with any property by the way, but it's honestly really useful for CSS custom properties.

[00:05:38]
And then you could set the value of that property. So just an example of this, let us reload so it's going to be blue, and so let's do this just as a JavaScript exercise. Again, you can play around with this as you want, but when I click the body, I want to change this from blue to say green.

[00:06:01]
So we're going to go in index.HTML, I'm gonna open up the script tag over here, and then we're going to get the, yeah, documents.body.event listener, click. And so when we click, I'm going to say document.body.style.setProperty. And we're going to set the, what did we call it, we called it primary color, so should be background color but primary color to red.

[00:06:39]
And so now, just trying that out, when we click the body, it changes to red. So we're going to be getting more into this when we talk about reactive animations but it's really, really useful. So I recommend learning about CSS custom properties also known as CSS variables and there is another Frontend Masters workshop by Lea Verou that does teach this more in depth.

[00:07:04]
So I really recommend that you check that one out. Okay, I'm going to use this, just because we're going to be using CSS variables not only for styles but visual styles but also for animations as well. So I just want to get you in the habit of doing that, and this little animation we created, I want to actually substitute this for a duration variable which I'm gonna set at the top, so duration 1 second.

[00:07:37]
And so this, of course, would be the same, and let's change the easing a bit, easing: cubic-bezier(.5, 0, .5, 1). Again, this is one of my favorite defaults, so if you have trouble thinking of which easing should I use, start with this one and then adjust these two numbers.

[00:07:59]
So now we actually need to use that, again, we're gonna be getting into this in future lessons, but I'm just gonna put it here for now, and now, nothing works. So, let's take a look at what's going on, easing cubic-bezier, okay, we have two conflicting properties there, that's why that's happening.

[00:08:21]
And there we go, so now we have a smoothly animating ball, so let's get, any questions about CSS variables before I move on?
>> So this change is reflected on every element that is using this variable?
>> All right, so the way that it works, and yeah, that's an extremely good question.

[00:08:40]
So the way that it works, and I'm just going to do this as an example here. Let's say that we put this ball in some container, right? And actually, I'm going to be changing this so that the body is not the primary color but instead we're going to be giving that to the ball itself.

[00:09:03]
So right now it has this cool little radial gradient, we're going to override that by just giving it that primary color. Okay, so let's change this color here too. All right, so you can see right now the ball is navy, and so if I actually wanted to change, let's make it a bit of a brighter color, just so that you could see it a little better.

[00:09:27]
We're gonna make it bright blue, and so we're also going to make the heading bright blue just to illustrate this. So if I said color there, what do I call it? Primary color then you're going to see that both the heading and the ball are the same color.

[00:09:48]
However, if I go and I add a style for the container, which I'm gonna add up here, and I set that's primary color to something different. Like let's call it red, then what's going to happen is that only the container and all the elements under that container, so descendants of that container are going to have that CSS variable.

[00:10:14]
So if we go back here, now you could see that the heading is blue but the ball is red. And so we could override this even further by just saying, I'm going to define the primary color here to be something completely different. So primary color, let's do green, although I don't really like the default green, so let's do something nice and bright here, and there we go.

[00:10:39]
So not only are we overwriting the root style but we're overriding the container style and defining it within the element itself. So this goes to show you that even though you could conceptually think of CSS variables as variables, they behave more like properties in that they inherit. Now, this is more of an advanced topic but there is a way for you to say that a CSS variable should not inherit, but I don't know if there's full browser support for that.

[00:11:11]
So just know that CSS variables inherit and they cascade, so if you override a variable in some parent elements, then those changes are going to be reflected for all descendants of that.
>> Can you override CSS variables in a pseudo element?
>> Ooh good question, yes you definitely can, and let's see an example of that.

[00:11:35]
So, let's say that I added before, and I'm just gonna make it big, with 100%, 0, top 0. And so now I want the background color to be the primary color, and so this before is going to show up as a square because we're not adding a border radius to it.

[00:11:57]
So just like you could see here, we have a square moving across the screen. But I could actually say, hey, I want this primary color to actually be orange, let's do that one. And so now we're overriding it in the pseudo element. So this follows the cascade, follows inheritance, and should work just as you expect, as long as you keep that in mind, that CSS variables do inherit.