SASS Tutorial (build your own CSS library) #12 - Mixins

Key Takeaways

all right gang so in this video i want to talk about another feature in sas mixins so mixins are a way for us to group together a bunch of css properties and values so that it can be included in many different css rules for example it might be that a group of different elements on our web page all contain the same padding margin color and font size properties and values now instead of rewriting those properties and values out for each of those elements in their own css rules we could create a mixing for those properties and values which could then be dropped in to those element rules now that might seem a little bit like gobbledygook for now but let's see an example of this in action by creating a new component and this component is going to be a button component so let's create that file inside the components folder so underscore button dot scss and inside here we'll create our button component all right then so in this file what i want to do is generate a button class for all of our different colors so that we can have a primary button or a secondary button and they're going to have those different background colors so again we're going to cycle through oops if we go to variables this color map right here so to do that remember we need to use an each loop so i'm going to say at each and then i'm going to say key val so key val and it's in the colors map and what i want to do is generate a button hyphen and then the key value right here so we say hash curly braces and then dollar sign key and generate a class for that so it's going to be button hyphen primary or button hyphen secondary etc now what i'm going to do is paste in some properties right here so we have text decoration of none because it is pointer display inline block border of none the padding is the base padding that we have declared in our variables file down here somewhere the base padding so we take that and we have that for up and down and then in the left and right direction is the base padding times two the border radius is the base border radius and the background color is the val right here of what we're cycling through currently in the colors map all right so we're generating this class for each of those colors now if i save this and check out our index.css then hopefully we're going to see that i'm going to just search for button and we don't get any results let me oh that's because we've not included it in the index file so let me include it right here components forward slash button like so then we'll save it and hopefully now yep we can see button primary button secondary button error etc all the different colors have their own button class now which is good all right so say we also want another variation for example we might want an outlined version so what i could do is generate another class to say btn hyphen outlined like so and then it's going to be whatever the key is so hyphen and then hash curly braces and the key variable so that's going to be primary secondary etc and then inside here i want to paste all these properties in again now the difference this time is that maybe the border is going to be different so i could say the border is going to have the base hyphen border hyphen and it's going to be solid and it's going to be the color of val so we need our colon right here these right here these are all the same here and here and in fact the background color for this one is just going to be white so let's do fff so with the exception of these two rules or these two properties the background color and the border and this right here the rest of these properties and values are the same in both of these selectors now we're just duplicating code here so what we can do is create a mixing which includes these different things right here these different properties and values so we just declare them once and then we include that mixing in both of these different selectors so let's try that what i'm going to do is come to the top and create a mixing now and the way we do that is by saying at mixin and then give this a name i'm going to call it btn for button and then we do parentheses and then our curly braces okay so now i can just paste in these properties right here now i'm going to take out the background color for now because that's different in each case the background color is the vowel here and over here it's white so now what i can do is delete all of these properties that i declared inside the mixing on each one of them right and then what i can do is just include this mixing in each of these selectors and the way we do that is by saying at include and then whichever mixing we want to include so we want to include the button mixing like so and i'm going to do exactly the same for down here all right then so now hopefully that's going to work exactly the same way and if i go to the index css file we're going to see we still get all of these classes with all of these different properties right here so that's working that's an easy way to bunch together a group of different properties and values that we can reuse in other selectors using this include keyword right here now you might be thinking why do we have parentheses up here and down here and that's because we can pass values or arguments into mixins so notice both of these selectors right here they both have a background color property now the value is different in each case but they both have the property so what we could do is we could actually set a background color property right here to be something and i'm just going to set it to be equal to some kind of variable called bg hyphen color it doesn't exist yet but what we can do is we can take in a variable or a parameter into this mixing which i'm going to call bg hyphen color right here and now all we have to do is pass that in when we call or include the mixing so i could pass it in right here to be val and that would mean that this right here when we call the mixing over here bg color is taking on this value val and when we set the background color it's going to be val so now we can delete it from here because we're doing it inside the mixing and the same for over here only this time we can just pass in the white color instead this hash code so i can copy that and paste it in and we pass in fff so this time when we include it the background color is going to be fff and we can get rid of this thing right here so if we now save this hopefully fingers crossed this is still going to work if i go to the css we can see the background color is going to be different in all of these different cases all right so we still have the blue we still have the outline blue and we have the red etc cool so that is mix-ins i do want to do a couple more things in here first of all i want to create a generic button class so this is if we want to have some kind of button in our template that's not necessarily one of these where we give it a background color of primary or secondary or something else it's just going to be a blank button so i'm going to say at include btn now then what's going to happen here because i'm not using parentheses and i'm not passing in a value so when it comes to this it's going to look at the bg color and say well that doesn't exist so what do i do for this well what we can do is specify a default value so i could say right here that this is going to be e2 so let me find the e2 e2 e2 which is kind of like a really light gray color and what's going to happen here is the mixing is going to say look if you don't pass me a value explicitly then i'm going to use this default value instead so in the case of this or this it's going to use these values instead of the default but in the case of this right here when we don't pass one in it's going to use this default color right here so the background color of this class is just going to be this gray color so that would be a generic button so if we don't want a button primary or a button secondary or something else we can just use this class and we get the generic color so that's the first thing i wanted to do secondly i also want to apply hover classes or hover effects to these classes so let me do that i'm going to say and so we're using the parent selector colon hover and then all we're going to do is give this a different background color when we hover so background color is going to be lighten like so and this is a built-in sass function and all it does is take a color which is going to be the val in our case that we have right here and lighten it by a certain percent now ours is just going to be by 5 all right and then for the hover case down here we'll say and colon hover it's going to be slightly different we're just going to say the background color this time is val because initially the background color in this case is white it's an outlined button so the background is white and instead we have a border which is the vowel color but when you hover over it we're making the background color the value as well so it could be primary secondary red purple whatever all right then so if i save this now we could try this out in our index.html file so i'm going to come here where we have the buttons comment and just paste in a bit of html so you don't have to watch me type it out and we have a series of anchor tags and each one has some classes the first one is just that default button class so if we go back over here we can see it's just this so it's going to include these properties then we have button primary and text white button secondary text white so we're applying this text white class as well to all of these because by default when we have buttons we're not giving it a text color and i want to make the text color white in these cases so it's down to us as developers here what color we want our text to be we can make it purple if we want but in some cases that's going to clash with the background color so i've gone for white so we have these different variations of the buttons we could have others as well like button hyphen purple or button hyphen red but i've just done a few but then also we have these button outlined ones which is these other buttons and down here button outlined and then the key so we have if we go back to the index button outlined purple button outlined orange and then we've made the text purple as well ourselves because again we don't specify the text color right here we have to do that ourselves because it's down to then the user using this library what color they want their text to be we just start the button with this the text is up to the user creating the template and then also when you hover over the button we've said make the text white because when you hover over these remember we're changing the background color of it to be purple or orange or whatever color we're using so then let's save this now and preview in a browser all right cool so now we can see all of these different buttons we have the default button right here with no theme attached to it then we have the primary the secondary the error and the info and when we hover over these they go a little bit lighter remember because we said on hover do that use the lighting function and then we have the outline buttons which look like this and when we hover over those the background goes the theme color and the text goes white so that's our second proper component we have the cards now and also these buttons and to do these we used mixins to group together a load of comment properties and values so we don't have to keep writing them out over and over