Name: CSSの変数。CSSチュートリアル (30日目のCSS3の12日目) (CSS Variables: CSS Tutorial (Day 12 of CSS3 in 30 Days))
Uploaded: 2021-01-14T10:30:59.000Z
Duration: 11 min 12 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

Hey, everybody, welcome back to CSS three and 30 days.

未来進行形

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.

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.

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

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.

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.

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

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.

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.

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

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.

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.

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

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

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.

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.

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.

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

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 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.