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.2 Inheritance and Scoping

Welcome back to the course. In this lesson, we’ll discuss inheritance and scoping when it comes to CSS variables. We have a lot to cover and quite a few examples to go through, so let’s begin.

Related Links

2.2 Inheritance and Scoping

Welcome back to the course in this lesson we'll discuss inheritance and scoping when it comes to CSS variables, we have a lot of cover and quite a few examples to go through. So, let's begin. Let's talk about inheritance first. I'm sure you're familiar with the concept of inheritance in CSS. For example, if I have a div with a paragraph inside, and I set a color of red on the div, right? The child, the paragraph will inherit that color from its parent element, the diff, right, I can then of course, go on and set a different color on the paragraph. But initially, the children will inherit most properties from its parent element. Now, it works the same way with variables, right? Variables can be inherited from the parents. So for example, inside this div, I can define a variable, let's say p color, and we'll call this red and I can change his to var p color, right? And now, the paragraphs will inherit that variable. And actually, to make it even more clear, let's do this. I'm gonna move the color declaration inside a paragraph. So I'm defining the variable inside the div, or the parent element of the paragraph, but that variable is available inside a paragraph, so CSS variables are inherited. Now, let me show you another example where this might come in handy. Let's take a look at this first part. We have an unordered list with a class of menu, and then each list item has an icon inside it. For the second list, all I did was add an additional class of large and colored, and the CSS for it looks something like this. What's in here for the body doesn't really matter, because I'm just using it to center this main demo content on the campus. But inside the menu, I started off with the usual reset just for the list style padding and margin. And then I set up display to flex, and the gap is a calc value which basically splits up the three REM which is the width and height of a list item in four. And I set a font size of 18 pixels, because I'm working with Font Awesome to to display these icons. Now, each list item gets a background color. Width and a height which are exactly the same, and then a line height, which matches the height so that the icon is centered vertically. And then on the large menu, I just made the list items bigger and I changed the font size on line height and on the colored list, I just changed the background color of the list items. Now, this can actually be written much more elegantly, and more efficiently using CSS variables. And to demonstrate the inheritance properties, I'm gonna do the following. In the menu, I'm gonna define an item size of three REM. I'm gonna define a font size of 18 pixels, and I'm gonna define an item color of 252525. Now for the gap instead of using three rems, which is the dimension of one of these boxes, I'm gonna use var item size. So by doing that, when I'm changing the item size, the gap will change alongside with it. And through this example, we can see that variables can be used in CSS calculations, which is pretty cool. For the font size, I'm gonna change this to a variable as well. And then inside the list item, I'm gonna change the background color to another variable. Font size, color white, then width and height, I'm gonna change them to my item size, like so. And actually, I made a mistake here, it's actually item color not font size. There we go, text align line height. This, we need to replace with item size as well, and so far so good, right? The List item inherits all of these variables from its parent, the URL or an ordered list and it's able to use those variables to define the proper styles here. But then, I can also simplify this CSS code in the following way. Instead of redefining with hide font size and line height here, I can simply delete these. And I can just change the item size to let's say 4 rems, and I can define the font size to 21 pixels and on the colored menu, I can simply change simple variable. Item color, I'm gonna define it to this new value. It's much simpler this way. And I don't actually need to specify, or target the list item in here. I can just say that okay, when it comes to the large menu, I want to change the value of these two variables to 4 Rams and 21 pixels. And when it comes to the colored menu, I wanna change the item color to this value. The rest of the declarations that can be found in here, right? And because, these variables are inherited by the children, when it comes to the large menu, the browser will use these values right here, and it's gonna replace them where needed. When it comes to the color menu, the browser will use this value right here, and it's gonna use it instead of the item color, right? So hopefully, that was one example that demonstrated how you can take advantage of the inheritance of CSS variables. Now, let's talk about scoping. Now, what exactly is scoping? Well, I'm sure you've heard about it if you're learning any kind of programming language. I'm just gonna use an example here from Java Script, so let's say you're defining a variable called number 1, and you're going to find that as 1. And then, you're gonna do a function that's called test. And you're gonna define another variable called number 2, and that's gonna be equal to 2. Now, if we're gonna do a console log for number 2, and you're gonna call the test function, if we look at the console, actually we have to do this, right? It prints out the value of 2. So, it prints. The value of number2. If I were to ask it to log my number1, it's gonna log 1, right? Because this number1 is a global variable. It has a global scope. It's available in my entire JavaScript document. Now, if I were to move this console.log outside of my function, right, it will still print 1, as you saw it right there. But if I were to ask it to print number2, Well, it's gonna tell me that number2 is not defined. And that's because number2 has a local scope instead of a global scope, right? So number2 is only available inside this test function, because this is where I defined it, right? So that's the difference between a global scope and a local scope. Local is available inside this function where I defined it, global is available anywhere else on my document. Now that's also true for CSS variables. Let me give you an example. I'm gonna start with a simple HTML. I'm defining three anchor tags. Each one has a class of btn. And then the first and the third have an additional class of btn-small and btn-large. For the CSS, I'm gonna start by centering these on the screen, and then I'm gonna say btn. And I'm gonna define a variable here called padding-size. And I'm gonna set that to 1rem. And then further down the line, I'm gonna say padding will be var padding-size. So now this will have a padding of 1rem. But let's say that I'm gonna define another class here, let's say container, and I'm gonna set a padding to the same value, padding-size. And let's give it a background of red, and let's actually, Define a container here. Right, that shows up, but it doesn't have a padding, right, because padding-size is only available inside this btn or any children of the btn. Does that make sense? If I were to define, Padding-size in the root, like so, And I were to remove it from here, then this would have a global scope. It could be used in pretty much every single element in the stylesheet. But when I'm defining it inside an element like this, any other element that's not a children of, in this case, btn will not benefit from that variable. All right, so with that out of the way, let me transform this demo into one that also shows you, again, the power of inheritance. So I'm gonna use this example to demonstrate how you can use inheritance and scoping to define different button sizes. So in this case, we defined a padding-size. Let's also define a font-size, let's say 16 pixels. And I'm gonna do something interesting here. I'm gonna say color-h, let's say 150, color-s is gonna be 80%, and color-l is gonna be 50%. So then I'm gonna define the background color of this button using an hsl value. And hsl stands for hue, saturation, lightness. Basically, you define it like this. You give it a hue comma you give it a saturation of that hue, and you give it a lightness of that hue. The hue is basically the color that you wanna use or a specific point on the color spectrum. 150 is a green, 120 is a pure green, 360 is red, pure red, 0 is also red, right? And the examples can go on and on. If you get a color picker, color spectrum, actually, and you play around with the cursor, you will see how each degree corresponds to a different color in the spectrum. s stands for saturation, so this is 80%. If I do 100%, that's the purest variation of that hue, but let's stick this to 80. And then the third one is the lightness or the brightness. If I set this to 100%, it's white. If I set this to 0, it's black. So let's keep this at 50%. But instead of using these values, I can simply say var color-h, var color-s, and then var color-l. And let's close out that parenthesis again. So now I wanna change the color of this button, I can simply play around with these three numbers. Maybe I want it to be a bit more desaturated, I can decrease the s value. Maybe I want it to be a bit brighter, like so, I can increase that. Maybe I want to change the hue. Maybe I want 250 in here, which will be close to a blue color, right? You get the idea. So let's finish coding up these buttons. I'm gonna set a color to white. I'm gonna remove the underline, so text-decoration none. Maybe give them a border radius. And let's set their font size to var font-size, cool. Let's actually bring up the bit of a CSS reset there. And I think actually I'm gonna change the hue of this, because it's a little bit too light for having a white text color on top of that. So then here's what I can do. I can say btn:hover. And because we're inheriting all of these variables, I can simply change the color lightness, for example, I can set it to 40%. So now on hover, I'm gonna get a darker color. I can also target the active state, and I can change the color lightness to, let's say 10%, right? So on click, it's gonna be really dark. I can also then target the btn-small. Class, and I can set the padding-size to, let's say, .5 rams. And I can also change the font-size to, let's say, 14 pixels, right? So that's gonna be a much smaller button. And I can then target the, excuse me, the btn-large, and I can change the padding-size to, let's say, 1.5, rams, and the font size to 21 pixels. And that's how you can easily define various states and sizes for component using CSS variables. Pretty easy, right? Now, you can also use CSS variables to create a simple grid system using CSS grid layout. So let me quickly show you how to do that. I'm gonna delete this bit, and I'm gonna start by defining a div with a class of grid. And inside a couple of divs with a class of grid-item, you can also use a list to do this. And inside each grid item, I'm just gonna display a number, and I'm gonna repeat this five times. Actually, I need to put this right here, like so. So, let's go ahead and expand that. And let's start with the CSS. Pretty simple, I'm gonna define or set a 2ram padding on the body. And then for the grid, we can start by defining a column-width, let's say, 20rams. And also a gap which I can use the calc function to set var column-width, and divide that by, let's say, 10. Okay, now inside, it's pretty simple, we just set the display to grid, and we're gonna use grid-template-columns. And we'll do a repeat in here, auto-fill, and we're gonna use a minmax value. So, the minimum would be your var, column-width, and the maximum would be, oops, 1fr or one fraction. So as you can see, the grid is already starting to take shape, let's define the grid-gap as var gap. And let's also set a margin-bottom, we're gonna need this later on. Now for the grid-item, we can simply do the following. Define a background color, a color for the text, and then display flex to be able to position this number inside it. This is just for demo purposes. Now it's really easy for me to control the grid by changing the column width, let's say, 10 rams instead of 20, right? Pretty cool. And also, I can change the gap. So instead of dividing it by 10, I can divide it by 20, it's gonna be a much smaller gap. And all I have to do is change these two variables, and I don't care about the other code. And I can also use this option to create another version of the grid, let's call it grid condensed, right? And in my CSS, I can target the condensed class, and I can simply change the column width to, let's say, 15rams. And let me actually bring these values back to what I originally had. And I can set the gap to calc var column-width divided by 15, right? So I can now have two versions of the same grid. And I created the second version simply by defining a new class and changing two variables, how cool is that? And the final example I wanna show you is about creating light or dark modes for a specific element. So let me quickly show you that. Now, I'm sure you remember this example. It's the first demo I showed you at the beginning of this course. Now in this card, we have a couple of variables defined. A color primary, which basically defines all of these blue colors here. And I actually forgot to include font-awesome to be able to see that icon there. We have an avatar size which is used to display or to define the sizes of these images. The global radius for the corner radius on the card and the buttons. And then I have another one that defines text color, right? So, this applies to all the text elements on the page except for the buttons, the background color for this card. And also the table border, which is this simple border around this table. Now, to create a dark mode for this element, I can simply define it here, let's say a class of dark. And all I have to do is define the text color, as, let's say, white or whatever value you want. The bg-color is gonna be 252525, and also the table-border will be defined as 444. So now all I have to do is go to HTML, add the class of dark to my card. And just like that, I switched to a dark mode. And because of the inheritance of CSS variables, these values re now being used inside the card, right? So we have a new text color, we have a new background color, and we also have a new border color for the table. And because the table is a child or a descendant of the card, right, as you can see, it's right inside here, it inherits those variables as well. And there you have it, five examples to demonstrate the inheritance and scoping of CSS variables. All right, and that's about it for inheritance and scoping. And I think just these two notions allow you to see how powerful CSS variables actually are. Now, when you're defining CSS variables, you might make mistakes, you might define some that are invalid. How do you deal with that? Well, we'll find out in the next lesson, where I'll also show you how to define fallback values for CSS variables. I'll see you there.

Back to the top