SASS Tutorial (build your own CSS library) #18 - Using @extend

Key Takeaways

all right then gang so another feature we can use in sas is the extend feature now the extend feature allows us to extend or inherit css properties from another rule it's a little bit like using a mixing but with some differences which we're going to talk about later to begin with we'll see in action by creating a new simple navbar component for our library so let me first create a new file called underscore navbar.s css inside the components folder and then we also need to import this new file inside the index sas file where we bring everything together so let's do that below the other components by typing at import and then we want to go into the components folder and then forward slash navbar all right then so the first thing we need in this navbar file is a basic navbar rule so we're going to make a selector which is a class of navbar and then inside this selector i'm going to give it a padding property which will be the base padding variable that we made earlier in the y direction and then the base padding times 2 in the x direction up and down i'm also going to give this a box shadow property which will be the base box shadow variable that we made earlier as well all right so nested inside our nav bars we might have a site title right so i'm going to nest another rule inside this now bar which will be the class selector site title and then inside that we'll just give it a font size property and that is going to be the font size large variable that we created earlier as well all right so we have this basic navbar rule but i want to add some styles for its layout too i want it to display as flex i want to justify the items etc now i could add these properties in here directly but i'm not going to do that because it would make that group of properties less reusable so instead i'm going to make another rule at the top of the page called flex layout which is a class selector and we can see here the properties i've already added to it it's got a width of 100 display flex align items centrally that's in the vertical direction justify content using space between and then a box sizing of border box so these are basically all the properties i want to add to the navbar class down here so to do that i can just say down here at extend and then whatever or the select i want to extend in our case dot flex hyphen layout which is the name of the class up here at the top and that will basically apply all of these properties up here to this navbar class as well so like i said before this is a bit similar to a mixing in that it groups together a selection of css properties which can easily be reused in other selectors but there are a couple of differences first we don't pass arguments when we're using extend we literally just extend another css rule so if you need arguments you'd use a mixing second the way this is compiled into css is different than if we'd used a mixin so let me demo that if we go to the output css file and search for navbar then we're gonna see the rules are bunched together comma separated and they include those common extended styles and any other rule that extended the flex layout class would also be bunched up here in the same kind of list of rules now if we were using a mix in instead then they wouldn't become a separated like this they'd all have their own separate rules with the properties duplicated all right so now we know how to extend rules let's carry on with this navbar component in fact we'll try using this in our html page to see what it looks like so far so at the top of the body in here outside of the container i'm going to create a nav element and i'm going to give that a class of navbar which is what we just made a rule for i'm also going to give this a class of text high from white and a class of mb hyphen 4 to give it some margin at the bottom all right so inside that now we'll do an h2 with a class of site hyphen title which we also created a rule for to style the font size of this nav title right and i'll just type in here shinobi css okay so finally we're going to have a paragraph tag below the h2 with a bit of text inside him and i'll just type inside that a lightweight css library for dev ninjas and then now we've done that we can save this and we can take a look in the browser but actually before we do that i just want to get rid of this text white again because i just realized that if we do that the text isn't going to show up because we've not given this a background color yet so let me save that now and now we'll preview this in the background or rather in the browser and we can see this nav bar at the top so we have the title on the left and this way over on the right and it's over on the right because we have the space between value for the justified content property so there's a lot of space between these two things right here now this is good but i don't want it to be full width i want the nav bar in the background to be full width with this box shadow but the content i want to bring in to this central column right here so the title and this thing so what we could do is we could place a container around this content right here so let's try doing that i'm going to create now a div with a class of container and then i'm going to grab this stuff and i'm going to paste it inside here so now if i save this we can preview it again in the browser and you can see right here there's a bit of a problem the content inside the container is sitting on top of each other instead of being side to side like they were before because this p tag should be way over here to the right and the reason for this is that the container doesn't have a display flex property the navbar around it does so its immediate children will be flex items but if we choose to put a container inside the nav bar then the container is the immediate child of the nav not the things inside the container so the things inside the container will not be flex items so we need to make sure that the container when it's inside a navbar is displayed as flex so in essence we need to make the container inside a navbar extend the flex layout that we already created before so now let's nest the container class inside the navbar bomb and that way we're not affecting containers that sit outside of the nut bar only those inside it and then inside here we can extend the flex layout class again which means it will have all of those css properties applied to it so now we've done that we can save it and preview again okay and now this looks much better now we have that display flex of the container so this sits on the left and this sits on the right awesome okay so there's a couple more things i want to show you first currently we're not using this flex layout class anywhere in our html and we probably won't do in the future we just created it so that we can extend it in other rules however when the sas is compiled it still generates a class for this in the final css output file which we don't need so when this is the case when we don't need a rule to be output to the final css you can change this into a placeholder rule and we do this by deleting the dots and replacing it with a percentage sign and now when we compile this these are the rules we'll still extend this one and it will contain those properties but the placeholder rule itself up here will not be compiled to css and we can preview that by searching for the rule in our css file now and we should see that it's not there all right so that's one extra thing i wanted to show you the next thing i wanted to show you is how to make color variations of the navbar so we could have classes like napa primary or navbar purple or something like that so the way we're going to do that is by coming down here and using an each loop so we say each key and val and that's going to be in the colors maps that we created because we want to create a color variation for the nav bar so the class name is going to be navbar and then hyphen whatever the key is because remember if we go to the variables the color map up here the key are things like this primary secondary error info blue etc so the classes will be navbar hyphen primary or navbar hyphen secondary or hyphen purple or whatever other color is in this map okay so inside here all we want to do is extend the nav bar stuff now what do we do do we extend this right here well we don't have to we could extend this right we don't have to extend this and add the other properties on ourselves we could just extend the nav bar and then give it a background color on top of that and that's what we're going to do so we'll say at extend and it's going to be the navbar we want to extend and then all we need to do is say the background hyphen color of this is going to be the val like so and that's all there is to it now we should have all of the variation classes for the navbar and if we take a look inside the index you can see all of these now all of these different rules that are extending the nav bar and now if we go down here we can see we've got all of these different variations with a different background color as well so if i go to the index file i can come up here and say navbar hyphen primary to make a primary color navbar and if we take a look at that in the browser now we get that blue background color now i do want to make the text white so let's add back in that text hyphen white class that we had before we'll spell this correctly as well for a start save it and if we preview now that looks a lot better and we could have different variations if we wanted to as well so i could make this secondary or i can make it a different color and we get those different colors right here i'm going to change it back to primary because i think that looks better for this web page and that's how we use extend my friends to extend these type of properties and also how we can extend classes as well and remember this thing right here the percentage means that this is not going to get output in the final css