Today is day number 12 and we are going to be playing around with something called CSS Variables.

There's also you can call it custom properties, but that's not as exciting CSS variables, especially for developers and designers out there who are familiar with variables in languages like PHP or J Query, or even using CSS pre processor languages like sass and less and S C.

S s where you use variables.

It really extends wth e functionality of CSS or whatever programming language you're using that are using the variables.

So in this case, we're just gonna be using plain vanilla CSS three.

But you do have access to something called custom properties or a k A CSS Variables.

So jump over here in our browser.

We're just gonna be coding a couple simple boxes.

Nothing crazy.

But the neat thing about this, everything we're doing here from the measurements to the colors are are used and created or styled rather via custom properties or CSS variables.

So why don't we just jump in and get started?

So here in my code editor, I'm back with Adam.

Hopefully it behaves well.

We have day number 12 CSS variables.

Go ahead and download that folder.

Open it up in your code editor.

And then let's jump right back in here in the index.

You're just going to see the usual that we've been using these past 12 days.

And just down here, you're going to see in the section just to def swung with the class of boxing moment, the class of box box, too.

And, of course, you could go down to the final result and check out how that's coated up in the final CSS.

There are a lot of comments and notes in here to help you understand why we're doing certain things, explaining the custom properties and everything like that.

But what we're gonna concern ourselves with is this file sandbox Nazi SS as usual and we're going to get started.

Let's start off by selecting these sandbox class and within their what we're going to do is declare three different variables or custom properties, and the way this works with custom properties in CSS is when you define that specific custom property within a selector, it is its scope is that selector.

So if you wanted the these variables to be accessible across the entire website and all styles you would use a selector like body or something like route is another selector through element of a tree representing the document.

You can use those electors if you want these specific variables to be accessible throughout the entire document something like a color or font size or maybe branding specifically branding colors.

But we're just going to use in this case sandbox.

So all of the variables are its scope.

Is this selector so the variables won't work if I am trying to use those variables on elements outside of sand box.

So this is how you start a selector.

Sorry.

This is how you start a variable.

You start out with two dashes and then you name the variable.

So I'm gonna see primary dash color and I'm gonna say orange red, another variable here.

I'm gonna say, secondary color dash color that is hot pink and then double dash base dash measurement 20 pixels.

So three variables.

It's not going to do anything.

If I save this and check it out in the browser, it's not gonna actually do anything because those aren't actual styles there just variables.

Now let's go back down here and let's access the variable like so.

So I'm gonna select the sandbox and then box.

So these air both of the boxes and let's just first of all, textile line center.

And now what we're going to do is let's actually add one more variable within sandbox box.

So now this variable is only accessible within this particular scope within box within sandbox.

So you can't actually use it outside of this selector with these elements.

Rather So I'm going to say double dash texts.

Color is gonna be f three f three F three.

Okay, now, here's how we access the variable.

So I'm going to say color and we have to open it up with var and then opening and closing parentheses and then accepting Colin, of course.

And then all you do here is just call the name of the variable that you created.

Double dash and text color techs dash color.

Now, if I save that and then go over to the browser, you're gonna see that you cannot see the text, and that's because it is the same color as the background in this case or pretty close and it's centered.

So we know that that variable is working.

Let's continue and style the background, and we're going to save our open closing variable or bar a double dash primary dash color and let's go ahead and say Margin and what's there we go and I'm gonna save our.

This one's gonna be based ash measurement, which, as we know, is 20 pixels.

So go ahead and save that.

Check it out in the browser.

Now it's doing something.

The background is that primary color, which is orange red, and the bass measurement is of margin is 20 pixels.

It is working, so this is nice.

So now one other cool thing that you can do with the measurements is you can actually do math by using the Calcutta function.

So let me show you how to do that height.

We're gonna save our and then bass measurement dass dash measurement.

But we don't want to just leave it there.

Let's wrap this in Calcutta and then semi Colon and we're gonna calculate this, But then we actually have to perform a calculation so outside of this s so this is the first argument here and there's one more times we're going to times 10.

So we're gonna calculate the VAR based measurement or the base measurement times 10.

And that should equal excuse me, 200 pixels and then I'm gonna copy that.

Paste it.

I'm gonna change this toe wits.

I want to be the same because it is a box.

And then I want the line height to in fact be the same as well.

Now, if I save that, I should have perfect boxes head over to the browser.

There we go all using the variables in the CSS here.

Let's check it out.

What shows up?

So we've got box.

And then if we look at the styles, it actually is showing up as Varteks Color primary color measurement.

It's actually showing those variables.

It's not showing the final, calculated number in there, at least in this developer tools there.

And so I find that pretty interesting.

Um, now let's do is go back to our code editor and we're gonna do one final thing here.

If you scroll down beyond that, we're gonna say sandbox and then box to we want to make that color of box two different background.

We've already set up a variable for it.

Var double dash secondary dash color saved that in the browser.

We've got our orange red box number one and her hot pink box number two The colors and the measurements are calculated and created using custom properties, also known as C.

S s variables.

That is exciting.

I hope that shed some light and some insight on some cool things that you could do with CSS variables instead of having to go in and create new install pre processors and different CSS languages like sass, unless for certain projects that might not be that necessary or too much.

Ah, work.

Maybe just a simple landing page and you just want to get something up quickly.

You can use CSS variables.

Make sure you check at the bottom of this page.

Here you can see the CSS three styles how compatible they are with major browsers.

If you click that, it'll take you to a page called Can I use And then you can type in something like CSS variables.

Custom properties permits the declaration and usage of cascading variables in style sheets.

And you can see here how compatible.

They are.

So with AII 11 it's not supported.

Oh, well.

And EJ, it looks like it's partial support and full support here on 16 Firefox fully supported chrome, fully supported Safari opera, IOS Safari Fully supported opera Mini.

Not so much Android 56.

Yes, 4.4 No.

And chrome for Android.

So we're pretty darn um, covered here.

So that's pretty meets.

You could see appear the percentage here.

So the global percentage is about 77.9% compatible, so you can rest assured that you're pretty safe using CSS variables, also known as custom properties.

I hope this lesson was exciting for you and give you some ideas and quick hot tip.

If you want to get access to all of these 30 lessons all at once, rather than waiting day by day, maybe you're ready to take on a challenge and get everything all at once.

All you gotta do is pay five bucks.

You get all the 30 days plus a full 30 day membership to code college.

We get access to all of my coding courses ever and just for five bucks.

And then after that 30 days.

If you want to stay, then it's just $34 a month afterwards, you can cancel it any time.

Basically, it's a subscription based model.

Think Netflix for coding tutorials.

And if you don't want to keep going and all you gotta do is cancel before that 30 day window is up.

So once again, all you gotta do is head to Brad Haci.

Dossier slash Gimme CSS three.

There should be a link up here on the screen.

Go ahead and go there.

You'll get the first month membership of code calls for five bucks.

That'll get you all of the 30 days of these lessons, plus every coding course I've ever made.

And you can have a heyday there.

And if you want to stick around that it's just 34 bucks a month hope to see you in there.

If not, I'll see you tomorrow for day number 13.