SASS Tutorial (build your own CSS library) #14 - Making Utility Classes

Key Takeaways

okay then so the next thing i'd like to do is to create some utility classes for this library that we're creating now in a lot of other css libraries and frameworks you often see classes like this like m hyphen 4 and that would be for margin in all directions and apply it to a strength of four or if you wanted padding left we'd use a class of p l padding left hyphen three and that would be a strength of three in the left direction our opacity o hyphen 40 which would mean 40 for opacity so we're going to generate these kind of classes in this lesson and it is going to be a little more complex than some of the things we've been working on so far so the first thing i want to do is create a file to create all of our utility classes in so inside the shinobi folder underscore utilities dot scss like so and then i also want to import that down here at the bottom so at import and it's going to be utilities like so all right then so in this utilities file now we're going to create basically a very big map of different utilities now the first thing i want to do is use the math module because we will be using that for some of the different values so sas math like so okay and then i'm going to create a utilities map so it's a variable which is a map now inside this map we're going to have different properties for example we're going to have a utility set for padding we might also have a utility set for padding left which will be a map as well and we might have a utility set for margin which would also be a map right and then later on we're going to cycle through this map we're going to get each one of these different properties and we're going to cycle through the different values inside that utility as well and generate classes for each one so what i'm going to do is first of all just start with the padding and in here i'm going to first of all give this a prefix value and that's going to be set equal to p now this will be basically our class name our root class name so if we want to apply padding to something it will be p something and it could be p hyphen zero to strip away the padding or p hyphen one to give it the base padding or p hyphen two to give it the base padding times 2 etc so that's the prefix of the class the next thing we're going to create is a property called values and this will be all the different values that we can have for padding so it could be strength 1 which is the base padding like i said strength two which is the base padding times two etc so this in itself is gonna be a map as well all right so inside this map i'm gonna say that first of all zero so it would be p hyphen zero and the value of that is going to be just the base or rather zero because we don't want any padding for p hyphen zero the next one would be one and that would be the base hyphen padding right and then we'll have two so strength two that would be p hyphen two and that would be the base padding and then we would multiply that by two now i'm gonna do the same thing but i'm just gonna paste these in right here so we have these different values all the way up to five will be times the base padding by eight so now we have all these different values for our padding utility now we don't have classes for these yet we're going to create those classes later on but what i'm going to do now is just paste in another one and this is going to be for padding left like this so this time we would have a prefix of pl that would be the class name the base class name and then the value zero three to five again this time it's only going to apply to padding left now the names of these utilities are important because they're gonna match the property names the css property names that we apply these classes to all right so i just want to leave it there for a second because what i want to do now is create some kind of sas code down here that's going to cycle through these different utilities and generate classes for each one so down here again i'm just going to paste this code in because i don't want you to watch me write this out from scratch but i'm going to explain everything that i do here so we're generating utility classes right that's what we're doing and we're saying for each property in the map and basically this is the property and this is the map that we get so normally we say key and value but in this case i'm being more explicit the property name which is the css property that we're going to basically apply values to and the map for that css property so for each property map in utilities which is the big map we have right here that's what this is called so we're cycling through that and for each one i'm getting first of all the prefix for each property so we use the map get function to get that we've seen that before and the map we want to get the prefix from is this map right here so whatever map is associated with that property and we're getting the prefix from that map so we're storing that right here so that could be p for margin or pl sorry p for padding or pl for padding left now the next thing we're doing is getting the values and again we say map get we want the map which is the map associated with whatever we're iterating at the minute and we want the value property of that which is also a map right so we're getting that right here the values so now we have the prefix which is the base class name and also the values which is a map of values we want to cycle through to generate classes for each value using this prefix as well so this time i'm using key and value but just short versions k and v so for each k v in values which is this we're cycling through those if k is default then we're basically just going to take the prefix right here and by the way k is the property name so we're saying if this is ever equal to default because later on we will have some default uh values then what we're doing is we're taking the prefix and we're just making a class out of that so it could just be for example pl on its own or p on its own now that's not the case for these because we don't have a default property but later we will so we just take that prefix and that is the class name and then also the property right here remember the property is these things right here so it could be the padding or the padding left in our case that's the property we're applying or right here so we're using a variable to create that property and then the value of that property is just whatever value we're cycling through in the values map right so if default doesn't exist which it doesn't in our case yet then all we're doing is taking the prefix and then also saying hyphen and we're adding on k which is this value so the prefix and then this value so hyphen zero or hyphen one or hyphen two and then we're applying the property here again in the selector and we're saying the value of that is v so for for example p l hyphen 1 it's going to be this because this is v down here all right so that's generating all of these different utility classes for us now if i save this and if we go to our index file i'm just going to open up the terminal to make sure there's no uh errors first of all and there are we can see right here we have an error it's saying that this is an undefined variable so let's go to the top have i spelt it correctly util it is all right so save it again now let me see okay that's got rid of the error so now if we go to the index.css file and search for pl for example we can see all of these different pl classes these utility classes so pl hyphen zero is padding left zero pl one padding left this pl2 etc and the same is going to be true for just padding in all directions as well all right so that's a nice way to cycle through these utilities right here so what i'm going to do now is just add in a load more utilities and then we're going to go through each one now i'm going to paste these and i'm going to copy them from my repo because there's an awful lot of these that i want to add and it would make no sense for me to write them all out from scratch that's going to take about 20 minutes so i'm pasting them all in and let me scroll up and let me go through each one of them quickly so we already had padding and padding left and remember these are the css property names they have to be the css property names we also have padding rights which is pr for the prefix the same values and padding top pt same values pb for padding bottom same values we do exactly the same thing then for margin the prefix is m this time instead of p but the values are pretty much the same only this time we use the base margin and times that by two four six eight so we have margin left we also have margin right we have margin top as well and margin bottom all right then we create an opacity one so again this is the css property name opacity the prefix this time is going to be zero and these are the values so if we say zero or not zero or rather oh hyphen 10 then the opacity is going to be 0.1 if we say oh hyphen 60 it's going to be 0.6 etc all right so the next one is border radius the property name and then the prefix for this the class base name is br for border radius and now we have a default case now we'll come to that in a second but we also have br high for none which is going to be this value be our hyphen xs for extra small which is this we take the border radius the base one and divide it by four using the math module small we divide by two large we take the base border radius and times it by two and full is fifty percent so this default case right here remember if we just add the class of br because the case is default it's not going to be br hyphen default for the class name it's just br because we have that if check down here if k is equal to default as we cycle through the values we don't tack on default to the class name it's just whatever the prefix is which in this case is just br right so that's what the default thing does if we just apply a class of br we get this base border radius otherwise it's br hyphen this high from this hyphen this or this etc all right next one is display the prefix is display values n for non b for block f for flex i've inline i hyphen beef inline block all right so font size again the prefix which is font the value small medium large xl and extra extra large and we're just using these font size variables that we created earlier on they are in the variables folder or file rather down here whew so that's just a few different utilities we've created right here and what we're doing now is cycling through the entire utilities map to generate classes for each one of these utilities that we've added so it would be very easy in the future to add extra utilities as well and you can do that if you want you can extend this for now i'm just going to save this and i'm going to check out the index.css file which will have absolutely ballooned because we're adding loads more classes in you can see down here we've got all the different directions of padding margin and if we scroll right down we can see opacity the border radius display and the font sizes as well and now we can use any of these different classes inside our index file so that's what we're going to do right here we're just going to output a few font sizes so let me paste those in right here like so so we have an h2 first of all and that is using a margin utility class margin bottom two so that's the strength of two and if we take a look inside the index and search for mb hyphen two we can see it's this amount margin bottom all right now over here we have the font size small inside of div and then we have font size medium then large then xl then xxl all right cool we also have this hr down here with a class of mt which is margin top of strength four and mb of strength four so margin bottom so what i'm going to do is also add this hr below the other section so below the buttons right here just so that we can separate our different sections of this webpage i'm also going to do it below the cards down here and then later it's going to be also below the grid system and also below the utilities i'm going to scroll up and place it below the buttons right here i think that's what this is or is it the colors who knows it's the colors all right i think that's it now we have it below every section so we're using those utility classes now inside our index file so if i save this now and preview it in a browser then we can see all of these different utility classes taking effect so this is the font sizes right here and we've also got these hr's right here which also have margin applied to them we can see that margin if we hover over the hr tag right here awesome so there we go my friends that is how we can generate all of these different utility classes using this utility map if you've used bootstrap 5 this is pretty similar to their utility methodology they have a big map with all these different utilities and they perform code to cycle through them obviously a bit more sophisticated than the one we've done here but this is a good start and if you wanted to you could extend this to add your own utility classes as well