Sass Workflow & Dev Server From Scratch Using Gulp

Key Takeaways

[Music] hey what's going on guys so I am working on a SAS crash course ass is a CSS preprocessor a pre compiler this was requested by a couple of my patrons and I wanted to use the sass starter pack that I created which is a really nice dev workflow for creating sass projects but I wanted to first make a video showing you how to actually create this okay so what we're gonna do is I have it already on github here feel free to clone it download it but we're gonna recreate it and I'm gonna show you how to use gulp how to use the gulp sass plug-in and how to use browser sync those are the three dependencies that we're going to use in this project and basically it's going to give us a dev server that's going to compile sass on-the-fly and before we start building and I'm going to show you how to use it which is very simple all we have to do is download it run NPM install NPM start and it's gonna start up our dev server and it has auto load it's just a really nice way to create sass projects so what I'm gonna do here is just download the zip file and we'll go ahead and open that and let's see I'm gonna create a folder I'll just call it I'll just call it test for now and we're gonna bring over the files from the starter package our starter pack and let's go ahead and open up git bash or open up whatever terminal or command line that you're using and all we have to do is simply run npm install and if we take a look at the files here let me just open this in visual studio code and if we look at package jason the only three dependencies we're using are these dev dependencies so we have gulp which is the java script task runner gulps asks to compile the sass and browser sync to actually stream to the browser okay so that's that npm install is is what that's what it's installing and then if we go and we run npm start because you can see right here I've put I've created a start script or an p.m. script called start that's gonna call gulp that way we don't even have to install gulp globally to run this alright so we'll go ahead and run that and PM start it's gonna compile everything and it's gonna open up your dev server ok so let's look at the source folder now the style dot s CSS file is is the sass file and you can see we set a variable of background color to dark gray we set it as the body background and that's what you're seeing let me just make this let's split this that's what you're seeing right here ok so when we ran npm start it took our sass file and it compiled it into this CSS folder into a regular style CSS and that's what this is right here alright now if we go and we change for instance the background color variable like to blue and we just save it's gonna auto load ok if we change the color here color if we change the color to black and save you'll see that that's gonna auto load as well ok if we clear this out and save and if we go when we edit the HTML file like let's change the h1 to hello and save and you'll see that gets auto updated so this is going to compile your sass on-the-fly and also give you this nice dev server that auto loads really quickly so this is what we're gonna build so we'll put it together and then we'll go ahead and we'll just add some markup and some sass just - I don't know build like kind of a simple little project using the starter pack so that's it let's go ahead and get into it alright guys so what we're gonna do here is start from absolute scratch I'm going to create a folder and whatnot a shortcut we're gonna create a new folder called sass underscore starter underscore pack and I'm gonna open that up with Visual Studio code which is the text editor I'm using now you're also going to want to open a command line in this folder whether you're using a Windows command line or a Linux or Mac terminal I'm using git bash if you want that for Windows you can go to get - SCM as see em calm and go ahead and download it I also have it integrated with Visual Studio code so if I go to integrated terminal you'll see that's what's being used down here now I have an empty obviously guys know we just created the empty folder SAS starter pack and what we're gonna do first is we're going to create a package.json file so to do this we're gonna run a command npm in it now you have to have no js' installed for this to use npm which is node package manager if you don't have no js' just go to node.js org download it and install it alright so let's run that and we're just gonna go through this so name that's fine version that's good description will just say boilerplate for SAS projects entry point that's fine author I'm just gonna leave it blank license I'll just say MIT all right so now if we look at our package JSON file that's what we should have now we're gonna have to install our dependencies so we're gonna have a couple I'm just going to clear this out real quick I'm gonna have what we're gonna have a couple dev dependencies so we're gonna have gulp gulp SAS and browser sync so let's say npm install we're gonna add the flag - - save - dev and then gulp gulp - sass and then browser - sync okay so let's go ahead and run that and since we did save dev it should add those up as dev dependencies to our package dot JSON file alright and then while that's going on let's create our source folder so it's a new folder SRC and the only folder we're going to need to create in here manually is our SAS folder which is gonna be s CSS okay and then we're gonna have one file in there called style dot s CSS alright and then just to put something in here I'm going to add a variable called body BG alright and we're gonna set that to let's say blue all right and then we'll put our body tag and we'll say we want the background set to BG color or if I'm sorry body BG and save all right so now we know we have our source folder with a SAS file in there so now what we want to do is create our gulp file because we need to create the tasks to actually compile the SAS and then also run our dev server run browser sync so let's go ahead and create a new folder called gulp file now you don't want to put this in your source folder this should be in the root okay so let's create gulp file dot Jas all right now as far as the gulp file goes this is gonna be pretty simple we're just gonna bring in our three dependencies so gulp itself so we want to require lips require gulp we also want to require browser sync so we're gonna set that to require and here we want browser - sync and then we also need to add on to this dot create okay which is a function and then we just want to bring in gulps ass I'm gonna call it sass so gulp - sass all right now that we brought those in let's create our first task so this is going to compile sass now to create a gulp task we just do gulp task and I do actually have a gulp crash course if you want to check that out made it a cup a few months ago I think and we're gonna call this sass and then we're gonna run a function okay so for this function we're gonna say return gulp dot source and in here we want to put in whatever files whatever sass files we want to get compiled into regular CSS so we're gonna put in here our source folder /s CSS slash and then NES CSS file so asterisk dot s CSS okay anything that's in there oops should be a slash right here so s CSS slash asterisk s CSS and then we're going to go on to the next line and do a pipe because we need to tell it where to compile to so we're gonna say golf desks which is just gulp destination and that is actually going to be source slash CSS all right so hopefully you guys understand what's going on it's gonna look in this location for SAS files and then compile it into this location and it'll actually create the CSS folder for us we don't have to manually create it alright and then we need to just need to do actually I skipped a step there should be another pipe right here and we just need to throw in the SAS function like that alright and then one last pipe at the end I can't type and this is going to be browser sync we're gonna say browser sync dot stream okay because we need to stream it to the browser that's our first task our second and last task is going to be to watch and serve okay so we'll say gulp dot task and we'll call this serve and then we just need to add a second parameter which will have the staffs task in it like that and then a function alright and then in this function we're gonna say browser sync dot and knit we're gonna initialize browser sync pass in a configuration object with a server value that server value is going to be the folder that we want to serve in a browser which is going to be our source folder okay that's where our we're gonna put an index.html file in there did we do that no we didn't do that yet but we will all right and then under that we just want to run a couple gulp dot watch functions here which is just going to constantly watch files we want it to watch our sass files so we're gonna put in an array here with the file names which is gonna be source slash SCSS slash asterisk dot s CSS just like we did above alright and then we need to put another parameter here and put some brackets in and just say sass alright and then we're gonna do another gulp dot watch and then this one is gonna be for our HTML files because we want to be able to edit an HTML file and have it auto load into our browser our sink into our browser so let's put in here source slash and then any HTML file so asterisk dot HTML and then we can simply do dot on so we're gonna do our dot on change meaning whenever an HTML file changes then what do we want to do we want to call browser sync dot reload okay because we want it to reload automatically and that's it now we just need our default task so we do that with gulp dot task and we call it default and all we want to happen is to run an array of tasks which will just be the serve okay now if you want this is this is um what the hell's the word I'm looking for scalable because if we wanted to let's say atom in of ice and task we could do gulp task minify and so on and then we could just add that to the array down here and it will it will run minify as the default alright so let's go ahead and save this now in order to run this with the gulp command you're going to need the gulp CLI tool installed globally so you can do NPM install - G gulp - CLI alright now I'm gonna be creating us an NPM script so that we can just do NPM start if you wait and you and you you do that and you don't care about running gulp right now you don't have to do this but just to show you can now we can run gulp okay and what it did is it compiled all of our sass if we look in this in the source folder now we have a CSS file with a style dot CSS file I'm sorry a CSS folder with a style.css file with body background blue so this was actually compiled from our sass file right here alright and then what it did is it opened up our dev server now it says cannot get slash because there's no HTML file in our source folder for it to load so let's go ahead and add that so in the source we'll say new file index dot HTML and let's add some HTML now I'm using Emmet so I can just - exclamation tab and it'll give me a basic structure for the title let's just say sass starter pack and save now since we created the HTML file after we ran the server we'll have to stop it with ctrl C and then we'll run gulp it should reopen and now you'll see the HTML file is actually loaded alright now I don't want to have to run gulp so what I'm gonna do is I'm gonna stop the server I'm gonna go into my package dot JSON file and I'm gonna create a script here okay I'm gonna replace the test because we don't need that and I'm gonna put start and then I'm gonna say gulp alright we'll save that and now we can run NPM start to start the server but before we do that let's add some stuff to the index.html so we're gonna want to link the CSS file that was compiled the style dot CSS so let's go ahead and put a link tag in here it's gonna go to CSS slash style dot CSS and then down here we'll just put just put an h1 and we'll say a sass starter pack ok and then we'll save that and let's run the server with NPM start okay so it's gonna compile it and it's going to run the dev server and notice that we have a blue background that's because if we look in our sass file we have our variable body BG set to blue and we have the body background set to that variable if I were to change this to red and save it'll automatically update okay and we're all set we're all set to start writing sad so that's the gist of what I wanted to show you just how to create the starter pack this is what we have uploaded on github now what I'm gonna do is just go a little bit further and just create a very very simple project not a stylish website or anything like that but just some examples using sass I guess kind of an intro to sass and some of the features that it offers so let's go in our index file and we're gonna create a header with an ID of main header okay and then in here we're gonna have a class of container and then we're gonna have an h1 and we'll just say sass website okay so under the header let's create a simple navigation I will say nav we'll give it an idea of main nav book should be hash main nav and this navigation the links aren't gonna go anywhere it's just for show really we're gonna put a container in here as well and then let's put our UL and in here we're gonna put an li let's put a link inside this li we'll give it an href to go nowhere and content we'll say home alright and that's just Emmet right there so now what I'll do is just copy this we'll put in a couple more let's do home about services and contact alright so that'll be our navigation and we're gonna style that using sass and I just want to sections so it's a section idea of section - a and in here we're gonna have a container and then we're gonna have an h1 o h1 I'm doing I'm using control tab for Emmet which is really kind of screwing me up lately so when the h1 let's have let's will say lorem 10 which will give us 10 words I'm just gonna turn on rap for you guys so you can see everything toggle word rap and under the h1 I'm gonna put a link and let's give it a class of button - I'll do button - eh alright and that'll just say read more and then I'm gonna copy this section a paste another one underneath change it to Section B and change the button to button B okay then that's going to be it for our markup so now let's go to our sass file style s CSS and we'll just get rid of this and let's go ahead and add our variables up at the top so we will do a body variable let's call it body - BG just so we can easily change the background I'm gonna just set it to white though for now alright we'll also have a main font and we'll set that to Arial alright and you can set whatever whatever variables you want you know whatever you want to put in the variable you can do that usually what I do is I'll have a primary color a secondary color and then some greyish colors I'll keep those in the variables so that I can quickly change those and they'll read a litter 8 throughout the site so let's create a primary color and this is actually going to be like a like a TLS color just paste that in and with v/s code you can actually see the color which is nice let's set a secondary color and all this is just for fun I'm not creating anything special here just kind of give you an overview of of what you can do with sass so we'll also do a light color which will be like a light gray so let's do for three times and then we'll do a dark color which will set to triple three all right so there's our colors now let's start to add our CSS rules so we're gonna add four actually before we do the body I'm just gonna add a reset so we'll take we'll say asterisk which basically means everything all elements we want to just take away the margin and padding all right because by default you can see that like the h1 the UL these have default margin and padding I want to remove all of that so I'm gonna save and you'll see that every all that all the spacing is removed so for the body we're gonna say background and let's set it to our BG color is it what does it know it's body BG set it to that and let's see we'll set the font let's set the font family to our main font variable and we're also going to align everything to the center okay there we go let's add some styling for links so links I just want to take away the underline so text-decoration:none let's make the color dark grey all right so now we're gonna move on to the container okay container I'm gonna set a max width and then I usually like to put the container inside a variable too so up here we'll create a variable called container and let's set that to I will say 960 pixels so that's going to be the max width so down here we can put container look container and then let's set margin Auto so that it's set to the middle and then we'll set padding:0 on the top and bottom and 20 pixels on the left and right save that and now if I were to stretch this out you'll see that it'll get constrained into 960 max all right so next thing we're gonna do is the header okay so the header area with the h1 so remember we gave it an ID of main header okay so in here let's set the padding to will say 1m we'll set the background color or I'll just say background for short and we'll set that to the primary color variable look why is that not working primary color setting the background did the server stop I must have had an error let's see very yeah since I messed up the variable variable name the server stops so we'll just have to do NPM start again and there we go so now we have the background color now I'm gonna show you a really cool function that will actually look at the background color of an element and then decide if the text should be dark or light so let's go up to the top here and under the variables let's create put a comment will say functions and we can define a function by doing at function and we're gonna call this set text color okay so set text color and it's gonna take in a parameter of a background color so we'll just say BG color and then what I wanted to do is I wanted to look at that color and see if it's if it's a if it's at a certain lightness then the text should be dark if it's at a certain darkness it should be light so we can actually use if statements will say at if and SAS has a function called lightness so if lightness is or we have to pass in the BG color it needs to know what to look at so if the lightness of the BG color is greater than 50 then and we want to return we want to return black as the text color alright then we'll do an else and we'll say return white as the color is that right no we need to do a tells like that alright so now we have our set text color now let's go back down to the header and for the color we're gonna say set - text color and then it needs to know what the background color is so that it can you can give us the right text color now you can see we're using primary color as the background so that's what we want to pass into that alright and we'll save and now you can see it's white now if I were to go up and change the primary color to some kind of light color like let's say white and save now the text is black okay so that's just a really handy function really handy function that I learned a while ago that I use all the time when I use sass so let's continue on with the nav actually one more thing the h1 in the header I just want to I want to make it a little bigger now you can nest in sass as well so instead of you know saying instead of doing this main header h1 and so on we can actually just put the h1 right inside here like this so we can structure it kind of like the HTML so I'm just gonna set the font size to let's say 40 pixels alright and that's it so let's move on to the navigation so it's a nav with the ID of main nav and we're gonna set the background background for the nav is gonna be the secondary color variable so secondary color and let's set the height of the nav to 40 pixels and then we can nest inside here the UL we can nest in the Li and we can nest in the a tag all right now the Li I want to display actually first of all let's remove the bullets so we'll go to the UL and we'll say list-style:none okay and we want the allies to display inline oops display inline save let's also add a little bit of padding to the UL to the top I'll sleep padding top 10 pixels and for the links let's change the color to white and let's also say padding right I'm not saying this is the best navbar I'm just doing this really quickly so 20 pixels separate them a little bit and then we can do a hover inside the a tag here we can say ampere Sam : hover and we can set that to let's say light grey so I'll do triple C and now you can see we have a hover event or not a hover event but a hover effect so that's the navigation now let's take care of the two sections so remember we have an idea of section - a now what I want to show you now is the extend function or the extend feature of SAS so let's say we want to do class section ok and then in this section class we want a padding now the padding I'm actually gonna put in a variable so let's go up to the top here and let's create a variable called section - padding alright we're gonna set that to 20 pixels still spelt that wrong okay 20 pixels and then down here we'll set the padding to that very section padding and I also want to set the h1 inside the section class to have a margin bottom of 30 pixels just to push the button down or I'm sorry the link down so if we save that nothing's going to happen because we don't have the section class on these section tags we just have our IDs now what extending allows us to do is we don't even have to add a class here of section we can simply go down here we can say at extend dot section like that and we'll save and now you can see it's added the padding and the h1 margin to section a okay we want to apply it to Section B as well so we'll go ahead and whoops go ahead and paste that in and we'll say section B save and it'll apply it to that as well all right now the background for section a I want to be the light color so we're gonna say background set it to the variable we created of light color save that you can see now it's like grey we're also going to use our little car set text color function that we created so we can grab this right here paste it in now we don't want to leave primary color here because section a actually has a background color of light color I want to make sure that we pass that in instead and save we're not going to see any difference because the text was already dark alright now we want to do the same thing for section B so what I'll do is just copy these two lines except I want to use the dark color as the background and that also means we have to pass it in dark color right here as well and save and now you can see we have our dark color the text is automatically white because we used our set text function all right I hope I'm not losing you guys here now the next thing I want to do is the buttons okay these two buttons member button a and button B and we're gonna do the same thing with the extend we're gonna create a button class and this button class is going to have the of 10 pixels 15 pixels we're also going to actually know that's it now we don't have a button class on our buttons that we just have an idea of section of I'm sorry a class of button a and button B so what we'll do is we'll add in those classes here button - a and we're going to extend dot button and then add our extra classes which is going to be the background background will be the primary color okay we'll save that you can see it as the primary color notice how the text is doc though so we want to apply our set text color function and then just change this to primary color that we pass in and save and now it has the correct text color so we'll do the same with button B let's copy that paste it in now button B I want to have the secondary color as the background so we have to change this as well save that and there we go alright so let's see I don't think I really want to go any further than that that's most of the SAS features we could also darken and lighten things so let's say for the background for button a we wanted to lighten this primary color up a bit actually let's darken this one and lighten this one so we could surround it in a function called darken and just pass in a second parameter of a percentage we'll say 10% and we'll save and you can see it's now darker and down here for the secondary for button B let's say lighten I'll surround that and we'll do also 10% save and now that's lighter all right now let's take a look at separating these into files okay so let's say we want the very and the functions in partials okay a partial is just that it's a partial file so in s CSS we're gonna create a new file called underscore variables dot s CSS now the underscore is very important because it signifies that this is a partial meaning that when we compile our sass it shouldn't create a variables dot CSS file in the CSS folder it should just simply include the code into the main file so let's copy all of our variables we'll cut them out paste them in there and save and then we can simply do at import variables and save and you'll see there's no change so let's do the same thing with the functions will create a new when I do a new file called func underscore functions dot s CSS and we'll just grab our one function here paste it in there save it and then we're gonna just import functions and notice we don't have to put the dot CSS we don't have to put the underscore either save it and it still works all right now just to show you how powerful sass is let's say that this was a big application or a big website with you know a bunch of different sass files and you wanted to take a look at you know different color combinations so let's change up the primary color let's change up all of these colors really quickly I'm just gonna comment them out actually you know what I'll do is copy them and let's say we wanted to change this color to let's say black now let's say red I'll change this one to black we'll change the light color to oh let's see we'll do just do five five five I guess and we'll do let's let's pick a color hair so we'll do like a dark red whoops we'll do like that okay and save and we have an error oh I'm missing the semicolon here there we go so we'll just have to run NPM start again and there we go so it opens up it's a completely different color scheme and it's as easy as that now this is a very small website so I mean it's not really needed to use sass here but just imagine that there's something bigger where you know you would have to go through and you would have to change every instance of that color where with sass you can just simply change the variables file same thing with like section padding if we wanted to make that bigger and we'll change it to 40 and save if we wanted to change the font like let's say we want to change it to two Homa Save Changes the font so sass is really powerful and I guess with this little example I can't really show you that but you can just imagine for a bigger application and then as far as deploying all you have to worry about is your HTML and your CSS folder okay so in this case we just have two files index HTML and CSS and let me just give you an example of that I'm just gonna open up FileZilla and let's say you went through you use the sass starter pack to create a really nice website and now you want to upload it so you would connect to your website I'm gonna create a folder on my remote host called test and let's open up our project folder and what I would do is just grab in the source folder the HTML and the CSS file folder and we'll upload that and then we'll open up a new tab and we'll say traversée media.com slash test and there it is okay that's all you need is those files right there everything else the gulp file the package dot Jason this is just your dev environment okay this is your workflow so I think that's gonna be it guys this video went a little longer than expected my main focus was to create the starter pack so you guys can create your own projects but I took it a little further and just created a little something here nothing special but just to give you some examples of some ass at some of the features of sass alright so thanks for watching guys if you liked it please leave a like please subscribe and I will see you next time so if you guys really like my videos and you learn a lot from them and maybe you have a couple extra dollars to spare check out my patreon page I'm working on creating special content for patrons you also get special deals on future courses and there's even an email support tier for all YouTube videos and projects to learn more visit patreon.com slash travis e media