Sass with auto-refresh (and more) made easy

are you new to sas or maybe you're just getting started with it you're getting frustrated by it you're seeing stuff with the command line that seems scary or not too sure what it's all about or anything like that or maybe you've started using it but you're not very comfortable or you want something that's a little bit better than just watching your files because then you have to refresh your page every time if that's the case this video is just for you i'm not looking at what sas is i'm not looking at how it works i'm just looking at how we can get up and running with it in a really really simple way and we're going to start by looking at just getting it up and running so it's watching our files but then we're going to build it out a little bit more using the parcel bundler just because it's so easy to do it's going to let us have auto refresh so you hit save everything's done it's going to compile your sas into your css but it's going to do a lot more than that too parcel is really good at optimizations and a whole bunch of other stuff it really is just a really wonderful way to work and we're going to see how easy it is even though we will be diving into the command line we want to simplify things as much as possible and make it really easy to understand and we'll see that it's not actually so scary after all all right so i'm in here i'm in i'm in vs code and it's completely blank folder there's nothing in here it is important for this that you're opening a folder not an individual file and the way i did that is just i have all my files here i just right clicked and i had the option to open with code if you don't see that option um and that should be on doesn't matter what system you're on but if you don't see it you can always just go to open folder here and find your folder and if you'd like to get that you'd have to just reinstall vs code and you can um you have to there's a checkbox option somewhere that gives you that option of having it on right click now before we get in and start doing anything there is one tool that we're going to need and you might have it you might not have it so to check before we get it if you already have it or not it's npm which requires node.js so you're gonna have to open your terminal for this you can see i did that here inside of vs code which is one of the reasons i really like vs code is it has the built-in one if not if you're using atom or something else that doesn't have a terminal if you're on windows you can use powershell if you're on mac you can just use the terminal or if you have another one that you prefer using i'm not going to worry too much about it but any of them like that will work and if you want to see if you have what you need you can do npm hyphen v and let's just hit return and it's going to tell me what version of npm i have which is 6.14.9 if you get an error it's going to tell you it doesn't know what npm is or anything like that all you have to do then is head on over to nodejs.org and you can install the latest version of node.js and when you install node.js it's going to come with npm with it it's part of the whole thing npm stands for node package manager so it's sort of a little bundle that you get all together we're not going to be doing a lot here it might look a little bit scary but honestly it's super super easy so you just click the link here it's going to go through an installation just like any other software that you might install on your computer and then you can come back to here and be good to go after you've installed it you can just do that check v and see if you get anything and then you can write clear if you want to get rid of everything and just start back over and you can see one of the nice things with being in my terminal here is i'm in the right one so i'm in my folder that's on my desktop so i'm in this this one right here and what i want to do before anything else and this is not part of the sas documentation but honestly it's a really important step to make the project and future projects you're doing a little bit more reusable i'm going to do an mpm init hyphen y let's make that a little bigger before i hit um there we go make it really big for us so we can see it a little bit more clearly and so it's an npm init y which means init means we're going to initialize an npm just means initialize and the when you do that normally it asks you a bunch of questions so the hyphen y just sets the default so you don't have to answer any of the questions and very quickly what it does is it adds this package.json file here and if you're not familiar with this it's just a basic you know you have the name so it's using my folder name but you can come up with your project name right here what version of the project if you want a description scripts we're going to play in here a little bit later keywords author and the license so nothing that we have to worry too much about at this stage but this is a really important step just to get things rocking and rolling and getting sas working you don't need to do this initialization but it really does help again as your project grows you're gonna be happy that you have this and you'll see why um as we get into the second part of this video now we wanna add sas to this project so to be able to do that what we're going to do is an npm install sas hyphen hyphen save dev and what the save dev means is it's going to add it to this package.json file and that's for if somebody else is working on it or you switch to another computer or anything like that and you want to start things up it knows that this is here so that's really useful because then it's automatically when you start the project it's going to install everything you need to get things working again and you don't have to remember all these different things that you're going to install along the way so we're saying npm go find sas and this the sas like this is a javascript version of dart sas so it's the up-to-date version of it and the save dev is just telling it to save it into here so we know in the future that this is part of our project and when you do this it shouldn't take too long but it does take a little bit it's installing a whole bunch and you'll see you'll get this node modules that shows up and the node modules is all the different things that are required for sas to actually work and if you have other things like we're going to add parcel later it's going to add a whole bunch of other stuff to there as well um so there we go no vulnerabilities which is always nice as well i'm just going to write clear here and we're good to go except let's just go take a look and you can see in my json file here it added dev dependencies and it added sas right there so it's just saying that this project requires this version of sas and this little carrot here means this version of sas or higher um should be fine but this is like the minimum version that will be acceptable for this project and now we want to get sas working so i'm going to zoom out a little bit here just so we can see what we're doing because we have sas so what i'm going to do is i'm going to come in my folder and i'm going to make a new folder called src which is my source folder this is not the public facing files but this is all the files that are sort of for dev development purposes right and in my src folder i'm going to make a new one called scss because that's where my sas can live and then inside of there i'm going to make a main.scss file and let's just put a little bit here so this is a nice way just i always test things to make sure everything's working so right here i can do my body and then i can do a background of you guessed it red and right now nothing's working nothing's happening it's not compiling i don't have any actual css read um but what we can do here now because we haven't sas installed in this project so to be able to get it to watch what we're going to write is sas hyphen hyphen watch like this and there's two different ways that you can get the sas watch to actually watch your files by watching it means look at a file and take that file and turn it into regular css so we have to tell it where to look for so i'm gonna go into my source folder in there into my scss folder and then we have two different options we can either tell it just watch this folder or we can say look at my main dot scss yes we're missing a c in there s css there we go um and then we can tell it from there what to do with it so i could tell it to take this file and go somewhere else and turn that into a instead of a main.css maybe i want a style.css but what i'm actually going to do is leave it like this and put a colon and then i'm going to go dist slash css and this is just going to be you know this could be public instead of disk which is distribution it could be whatever you want but this is the dist is the one that's going to be public facing so this is where all the finished files go so again this could be public or whatever you want to call it and we're just going to hit return on that and you can see that it compiled this to my main.css in there and sas is watching let's actually go and check that out let's go you can see it actually made a dist folder and we have a main.css in here and let's split this apart and we can double check if it's actually working we can change my red here to be f00 i should hit save here and right away you can see it updated there and it is seeing the changes right here and every time we make a change here let's bring this back to red when i hit save you can see that it's compiled it again so it's working everything is fine everything is working everything is good to go but there's a small problem and that problem right now is that usually what happens is you build your entire site over in here in the source world and right now if i had an html file so it's in my source let's add in an index.html and so this index.html is living here but sas isn't paying attention to this sas is going to compile to my distribution but it's not going to do anything with the html if i had javascript it's not going to touch my javascript it's just going to let everything just like hang out and not do anything which i sort of want an html file that's going to end up in there and if i have any javascript i want my javascript to end up in there so how can we do that ah that's where parcel comes in so i'm going to cancel this we're going to do a clear and we're going to come in here with another npm install and this time i'm going to write parcel bundler like this um now i also want to save dev this so save dev or if you want to save keystrokes save dev is also just a single hyphen and a capital d so whichever one you want to do will have the same results but we'll do the same dev the long way because why not and let's hit return on that now now this one might take a little bit longer to install just because well we got an error oh i misspelled bundler let's try that again so let's do a clear um so we'll do that again npm install parcel bundler i've got the end before i think bundler and once again save dev and let's see if this one works there we go it's working this time good um so as i said this one's a little bit bigger heavier than sas so this will take a little bit longer to install so i'm just going to let this go and i'll see you once it's done all right so mine is all done and ready to go parcel is installed so if i go and look at my node modules now there's probably a lot more stuff in there and if i go into my package here i should see parcel is here so in my dev dependencies that's been added in there so that's really cool uh so let's close that because we don't need it anymore and i guess it's not really cool but whatever um and the cool thing with parcel is it just figures things out so what i'm going to do is in my index explanation point tab to get what i need let's close my css file and actually i'm going to i'm going to delete this distribution folder for now just to show you how parcel works so that whole thing should be removed actually i want to remove everything there there we go okay so let's just call this a sas starter project and the thing that's really interesting with parcel is when you use it the you actually want to tell it to link not to where your compiled css file will be but you want to tell it to link to your scss file and that's how parcel knows that you're using sas on your project so that's really interesting so here relative to here i'm going into an scss whoops sc s css folder and i have my main.scss so it's relative to this index file right there and i can you know that's all i need to have set up here so we could take some time to tell parcel where to look every time we want parcel to do something but what we're going to do instead is we're going to go into our npm scripts now our package here which is our package.json and our the scripts right here we don't need a test script so we can delete that and in here what i'm going to do is we're going to make a new one and it's going to be called dev and what my dev1 is going to do is run parcel so we're new parcel and we're going to tell it where it should be looking whoops this needs to be in quotation marks parcel and so where should parcel look it's going to look at my index.html that's inside of my source folder right here so i could run that right here i could write this in and it would work but it makes it a little bit annoying to have to remember where things are in the file name you want and all of that so we can do that and so the other one want is our build build like that and then what we want is that it's going to look for or it's going to run parcel and it's going to do a build source slash index.html just like that and there's a small difference between these so we'll see what they are in a second and so dev build there we go we're ready to go and we can use that so now what i can do is write in npm run dev and it knows that i want to run this script that is right there so let's hit return on that so it's saying npm go look in your scripts folder and run this right here and look at that built in and look over here in my disk folder that that this is parcel just created this dist folder here there's an index file and look at that there's actually nothing in there because i don't think i saved this file so let's hit save on this it's building the site oh and it actually compiled my css now and look at all those things that just showed up isn't that really cool so because it was linking to this main.scss file it knew that it had to go and grab this and compile it into regular css on its own and the wonderful thing with this is is opened up a dev server that we can use so i'm going to control click on that to open it up in its own little window and you can see that right here so let's get this set up so we can actually see what's happening and if i come here in my body and i make a change hello world hit save it's automatically there i don't have to refresh my browser to get that to show up or let's come here and change this to pink so our eyes stop bleeding and i just hit save and it updates right away i don't have to do anything else which is so fabulous and so fun and so easy and it's just going to keep running keep watching parcel does more than just this though it's doing a lot more so i'm going to link down in the description to parcels documentation so you can see all of the amazing things that you can do with it um because it will make some javascript and some other things along the way as well so just so you know what it's doing what it can do with your javascript if you're using javascript in your files um but it's really cool really easy to get up and running with it and here it's always doing that if i ever need to end this i can just do a control c and ask me yes i want to terminate and now i'm i'm back out now the big difference between the npm run and the npm sorry the dev and the build the dev one's going to watch your server and any changes you make is going to happen build doesn't do that but the run the the watching one or the dev one goes much faster it's not doing any optimizations it's just like boom it's making your site as quickly as possible so you can keep that thing going if you do the build it's going to optimize your site a lot more so it's very slow to run but the final output of what it's making is much more optimized it's going to run like css nano auto prefixer i think there's a whole bunch of javascript stuff too it optimizes things but it means that it builds things much slower so when you're just doing development work you want to be using your npm run run dev and then it's going to do the development server and then when you're ready to push to production and ready to put something online you're going to do your run build and then get a more optimized final one and it's your dist folder that's going to have and it'll be in your dist folder where everything that's ready to go should show up in there now one last thing that's really important is i'm going to be putting this up on github and i would recommend that you get your stuff up on github in general it's a nice way to do version control and also if you're working in teams is sort of a must so another thing we will want in here is a dot get ignore and the git ignore means you know ignore these files when they're going up and i want to add node modules with an s to my git ignore file because i don't want to overload my you know git doesn't want all that stuff in there and you don't have to download that every single time when you're forking off or when you're downloading it it's just it's giant files that are being hosted for nothing but that is if you're coming in with something that's already been set up you're not going to have the node modules in there so before you start the very first thing you want to do is an npm install and what that's going to do is it's going to look inside this package it's going to look in any dev dependencies or main dependencies that you have and it's going to download everything into your node modules folder that it needs to be able to function properly so if you're downloading from the link down below that has everything here already set up just use the mpm install first and then after that you can start going in the final one you'll also see a readme that has a little bit of documentation if you forget that at the time just make sure you read the readme before you get started and you should be good to go so i really hope you like that i hope you learned a couple of things along the way there and you have now have sas up and running now as i said this video is not diving into what sas is how it works all of that so if you're looking at learning more about sas there are links to other videos down below but also i am looking at relaunching my sas course i did create a sas course a while back and since then sas has completely changed i'm re-recording the entire thing they switched over to what we call dart sas now and they added modules to it and it's growing a lot as a language so i it just needs a complete re-record as i dive into that new material and then work with that so i am working on that as we speak now this could be from if you're just starting with sas or you've been working with it for a little bit but you feel like you're just scratching the surface and you want to really explore it and up your game with it so if either one of those is the case and you're interested in updates on the course and being the first to know when it finally does launch there is a link just down below where you can sign up for updates on that thank you very much for watching this i really do hope that you enjoyed it and you'll be able to use this build in your future projects a really big thank you to my patrons for helping support me every single month and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 32,879

Rating: 4.9725275 out of 5

Keywords: HTML, CSS

Id: wYWf2m_yzBQ

Length: 17min 45sec (1065 seconds)

Published: Thu Jan 21 2021