Name: CSS Variables Tutorial
Uploaded: 2020-03-28T09:20:47.000Z
Duration: 8 min 56 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

To-infinitive

We're going to be covering CSS variables and how that could be used to create a light and dark theme for your website.

I have a basic HTML file on the left here, which imports are stiles dot CSS, file our script file for our JavaScript and contains two dibs named one and two, with some child elements inside of them named 11121321 and 22 And then, finally a couple of buttons at the bottom with unique ideas, which we're going to use to swap around our themes he has started.

Let's go into our styles that CSS and actually talk about how we can use CSS variables.

At first, CIA says variables may seem like a complicated topic, but really they work just like any other says has property, except for you get to define this property yourself as a custom property most of the time where you wanted to clear.

CIA says Variables is either in the route or html of your document because CSS variables, just like all other CIA says properties cascade down and can be inherited or overridden in lower down, more specific elements.

So, for example, let's just say we wanted to create a background color for all of our different elements.

What is calling did background color and we'll set that to read.

Now we can break apart this in text CSS variable.

All it is is any declaration that begins with two hyphens just like this.

So two hyphens and then the name of your variable comes afterward, and then you just give it a value just like you would any other CSS property.

And we could do this with a bunch of different variables.

Let's say we want to call another variable called text color would have said that to black.

We're gonna add padding to our different elements, so we're just credit if padding variable and then lastly will do the same thing.

He also said that 10 pixels, and if you say that you see that nothing actually happens in our page over on the right, and that's because we haven't actually used these variables.

It's now let's go ahead and sign these variables to our different child elements.

So we can say dot child here and this is going to select all of these different elements 1112 and so on.

Because we have this class on them in HTML and we could just set the background color, for example.

So let's say we want to set the background color.

We want to set its that variable that will be defined of the DIV background color here.

So to do that, we use the VAR function and then inside of this far function, all we do is pass the different variables that we want.

So in our case, we want to use the div background color variable and that's going to assign this variable red here to this background color.

And now if we say that you see that each one, these elements now has it back on color.

That's red, and we can also go even further and add the color variable here so we can just say the color.

It's going to be a bar text color, and if we save this, you see that it takes cars black.

But I was already black, so really, that doesn't make much difference.

Let's say that we want all of these that start with one, which is inside of that one.

Dave, as you can see here inside of this one, did we have these three Children?

Let's say that we want to change the background color in those instead of actually going in and making the background color different.

So in that one day that we have, we could just take this.

And now if we say that you see that everything inside of one here changes to a background color of blue because this variable starts his red gets overridden in this 10.1 to be blue, and then when it gets the dot child selector, it's using the blue variable.

Since it was overwritten, we could do the same thing with text color.

So if we just copy this, change this to de text color instead.

And let's say we wanted to be white and we say that a nice see that our text color is white inside of the wonder, but not inside of the to do since we haven't actually specified anything inside about to dip yet, and it just uses this base value that's inherited from the root.

Another nice thing about variables, which is really the biggest use case for them, is that you can use them in multiple places, your application and change them in one spot, and I'll change it everywhere.

So, for example, let's say that we wanted to select this 1.1 element and we wanted to give it a little bit of margin so we could set the margin here to be equal to that variable that we created, which is did margin and we could do the same thing.

But in this case, we want to do padding instead of margin.

If you say that, you see that we now get that padding and margin around 1.1.

But let's say we want to do the same thing for one, too.

Well, we could just use that same exact variable in that statement, like patting you save it and you see that we get cut margin and patting around 12 and 11 What say we ended up saying we want our padding actually be 20 instead of 10.

So we updated here once in that variable and we save it and you see it updates everywhere that that variable is used.

And really the biggest use case versus that's variables over actually just hard coating 10 pixels or 20 pixels because then you would need to find where it's used in all those cases.

The last thing we need to talk about with says as variables is having a fallback value for when you're variables not declared So.

For example, if inside of our body we wanted to change the background color, we wanted the background of color to be dependent on a variable, which we're just going to call background color.

And we say that we don't actually have a variable for background color.

So we can say if there is no background color variable, just wanna fall back to the color pink.

And if you said that, you see it falls back to the color pink because background color is not defined anywhere.

But we're going to actually define this background color and JavaScript later using these dark and light thing buttons.

So until we define that, we want to just fall back to pink in this case, So now we could talk about how we can use CSS variables and JavaScript, which is what makes us as variable so powerful compared to using something like sass or less, because you can actually use these variables in Java script itself.

So it's open up our job script file here and go through the different ways that we can both access the CSS variables and change the CSS variables to get started.

Let's show you how to get the variables from your CSS.

We want to get to the variables from the root of our element, which is the document dump document element.

But in order to get the actual variables, we need to get the computed style of this element, which is just a function on Windows.

We say window dot get computed style and we just passed the element.

We want to get the commuted style for once we do that, we could just call get property value and we just passed the name of the variable that we want to get.

This can also be used to get any property value of CSS, but we're just going to use it specifically for variables.

So let's say that we want to get the background color.

We got the background color and let's just say we want a log that out.

So we'll just cancel that log that back on color, open this up so we can actually inspected.

And if I pull this over here and save this you see that we get red being printed up because that's the value of Dave background color.

If we look at it text color, for example, you see that we're going to get black, and we could do this for any of our different variables.

So now we can exact that, and we can actually talk about making these different buttons set the variables that we want to change so that it actually update our CSS dynamically.

The first thing that we need to do is actually a sign a event listener for the click of these buttons.

So if you could just say a document, I'd get element by i d.

We have an I D on this element of dark theme button, and then we just want to add an event listener.

In our case, it's going to be a click event listener and this click event listener.

We're going to find a different function to it, and then inside of this function is where we want to set the value of this variable.

So again we could get the root element of our document by document that document element.

Then we can access the style, which is just going to be all of the different CSS for this element.

And we can say set property, which is where we want to set a different property based on the name.

And in our case, we just want to set that background color variable that we're using inside of our code for the CSS, and we'll send it to about you hear of 333 which is a dark gray color.

Now if we say that and we clicked dark theme, you'll see that our background color updates to be this dark gray color.

And that's because we're setting the variable background color inside of our CSS route element to be this dark red color and inside of our CSS.

We're using that variable here to set the actual background color, and since this variable set, it's no longer shyness pink, and it's showing us whatever this background color variable is.

So now all we have to do is the exact same thing, but for our white thing.

So we can just change dark theme toe light theme.

And instead of doing this dark gray color, we can just use white.

And now, if we save that you see are dark name button changes, its dark and our light theme button changes.

It's a light, and that's exactly what we wanted.

So I hope you guys enjoyed this video on state sets variables and learn how you can use them and not only your CSS, but also your JavaScript and how it could make your code cleaner and easier to use.

 If you did enjoy this video, make sure you check out my other tutorials on CSS and JavaScript linked over here and subscribe to my channel for more videos just like this. 

Subtitles ListPlay Video

CSS Variables Tutorial

incredibly

access

spot

exact