4.4 Day 4: @extend Directive

Welcome to day 11. Today you are going to learn about something called the extend directive which allows a selector to inherit styles from another selector. Let's begin. Let's start with a simple example. So let's say for instance that we have a button and that button has a few styles. It has a display, padding, font size, background color, border and border radius, and let's say that we have another button that's a bit larger. It has a bigger font size, bigger padding, and bigger border radius. Now normally You would do something like btn large and you will just change the stuff that you want. For example, font size let's do 2rems instead of one. Having increase that 1em 2ems and increase the border radius as well. So In html you would do, for example, a with a class of b t n and b t n large. So, from b t n you will get the display, you will get the background color and the border, and from the large you would get these three, but the problem is, b t n large depends on b t n. You cannot have an element with just the btn-large class. So, what you can do here is you can tell btn-large to inherit all the styles from btn. We'll do that with the extend directive. So, we will say extend btm, which is the name of our selector here. So now, btm large will inherit all of the styles from btm, but will also overwrite, and adding some of its own styles. So, let's see how this looks in CSS. We have btm and btm large Sharing all the common styles and btn-large just overriding a couple of them. Very, very cool. Now you can also do something that's called chain extends. So for example, if I have a button extra large, I can do something like BTM extra large, and then I can extend BTM large, and let's say that I wanna change its font size to 2.5 reps. So this will inherit the styles from BTM large, which inherits the styles from BTM. So our CSS is gonna look like this. All three classes inherit the base styles of btn. The large and extra large, only have the styles of btn large and the extra large, only has this bigger font size. So now, you can include any of this classes. To a DOM element. It's gonna work just fine. You can also create multiple extends. So let's say, for example, that we have another class here called .btm-primary that has a background color, color and text-transform: uppercase, and I'm gonna have another class called, for example, btn-cta, or call to action, that should have the styles from the extra large button, but from the primary as well. So in that case, I will do something like extend, btn extra large and extend, btn primary. So now the btn cta, will have, will actually inherit All of the styles that btn-extra-large inherits, plus the ones from btn-primary. So, now if we look here, we can see how the CSS looks like. Now, extending also works With directives. So, let's see how it would work with the media directive that we've learned in the previous lesson. So, let's say for example here, media screen and Let's set a max width of 1000 pixels, and then I would have a class of submits that has a background color and maybe a color for the text. Well, I can then target for example, an input type submit, and I can do. An extend for the submit class that we define in here and this work just fine as you'll see here. So submit an input submit they have both the same styles. However, If I wanna do extend btn that's not going to work. It gives me an error, and it says you may not extend an outer selector from within media. You may only extend selectors within the same directive. So, this is an important thing you should keep in mind. Now, for your exercise, you have an .scss file, and your assignment is to write the corresponding css file by hand without compiling the SAS code. So we have a few variables here. You have a couple of selectures, a lot of extends, and once you're done go ahead and compare your result with the one from the exercise answer folder. Good luck, and that was the extend directive, a really useful feature when it comes to reusing styles between selectors. Coming up in day 12 are the if and for directives. I'll see you there.