SASS Tutorial (build your own CSS library) #5 - Project Structure

Key Takeaways

all right then so for the rest of this series we're going to be building our own mini css library like bootstrap or tailwind or bulmer or something else and it is going to be a mini version a very simplified version of one of these and then we're just going to use that css library to design some kind of web page later on so to begin with i just want to set up a decent project structure so that we don't have sas code or sas files flying around everywhere and instead they're organized in a nice way that's going to make updating our project really easy so to do this we'll create a folder first of all to keep all of our sas files inside and i'm going to call the folder shinobe because that's what i'm going to call the css library that we're making shinobi css sounds kind of cool right so now we can move our two sas files into this folder the variables one and the index one and any other partials we create in the future are gonna go in here as well now to begin with in the index file i want to delete a lot of this dummy code that we created earlier on using those variables that's not going to be a part of our library so let's delete all of those and then the rest of this stuff at the top this reset stuff i want to extract all of that into a new partial file as well just so we're organizing our code in a nice modular way so first of all let me create a new partial file inside the shinobi folder called underscore and then base dot scss and then i'm going to copy all of the base styles including the font import at the top and i'm going to paste all of that into the base file all right then so now we need to import this base file into our index file because the index file is the one that's ultimately being compiled and bringing everything together we already import the variables one so now let's import the base one so underneath the variables down here i'm gonna do at import and then base all right then so now we've changed the structure of our sas files a little bit they're now living inside this folder what we need to do is go to our gulp file and just update where the source files are going to be because at the minute this is just looking at the top level for any file name with a sas extension so we need to update this now to tell it to look inside the shinobi folder first of all so i'm going to say look inside shinobi like this and then forward slash and then i'll do double asterisk and then forward slash asterisk so what's this well this right here means any subfolder as well so it's going to find any sas file or any subfolder with a sas file inside this folder and it will compile that so i'm going to do the same thing down here let me copy that and paste it down here so we're watching any sas file inside here as well and remember it's not going to compile all of those to different css files because we're using this underscore right here which marks this as a partial and it says to the compiler look don't compile me we're just using this in another file all right so that's now gonna all work we need to also open up the terminal cancel out the process because we're using the old one now and then run gulp again so we can run again watching that particular folder all right so that's all set up now now i want to talk about one more thing and that is the order of import in this file because the order of import right here does matter because different files might depend on code previously created in other files for example if inside this base file right here we create a selector so i'm going to say dot test and then inside here give it a color which is going to be a variable which we declare inside the variables file i'm going to call it primary or rather it's already called primary i'm just using that variable right here this is allowed because base is below variables in the input order so that means anything declared up here has been pulled in first of all and therefore by the time it gets to the base file it knows what those variables are and we can use them so if we take a look at the output css because this will have compiled then we can see we get that test selector with the primary color however if i was to change the order of these so that bass came first then this is not going to work and if i save it now and open up the terminal we can see we get an error which says that we can't read basically the primary variable it's undefined and that's because the sas compiler is working top to bottom in this file it runs through all of the base file first of all it gets to this primary color and says hang on what's going on here i don't know what this primary variable is so i'm going to give you this error down here and it's not going to compile for us so the order does matter if a file depends on a value declared in another file then it must be below the file it depends on okay so i'm going to grab the base again and bring it down here all right then so what i'm going to do is just mark in a few comments in this file so that in the future when we start to add other partials we know where they're meant to go and we're not going to get confused about the order of imports so let me first of all at the top say this is going to be for variables and also functions we don't know what functions are in sas yet but they're basically like functions in programming and other files might use them so they're going to go at the top later as well all right so after that we're going to have all of the kind of base layout stuff so base and layout because these are reset styles right so they're very kind of top level styles and the layout as well is going to be things like the grid system so that's going to come second all right so after that it's going to be the colors so things we do with colors to generate classes like for backgrounds or text colors they're all going to use variables and maybe a function so they have to come down below and then after that it's going to be components let me give a little more space here we'll say components and that's going to be for things like the button components or the card components or the nav bar etc now all of these things are probably going to use the variables and functions as well maybe something else either way they're going to come fairly near the bottom but at the very bottom let me close this is going to be the utilities so let me do utilities right here and that's going to be things like the margin classes the padding classes opacity etc so all of those are going to be at the bottom because again that probably depend on variables and functions now the order of these kind of things right here maybe it might be that these could go above the colors or these could go above components that might not matter so much the main ones is that the variables and the functions that a lot of the other files are going to go at the top but we'll just stick to this kind of general import order here as we make more files in the future