Get Started With Sass on Windows

Hey guys, I decided to make a minieries on SAS, which stands for syntactically awesome stylesheets. And what it is, it's it's a CSS preprocessor. Um, or you could also call it a CSS extension language. All right? And it just allows us to do certain things like uh use variables, use mixins, which are kind of like functions uh in our CSS. Um, and what we what we do is we work inside of a SCSS file. All right? And then we have a compiler that will go through and compile it and then generate a regular CSS file. Okay? So, the browser doesn't read the SCSS files or anything like that. We're just generating a regular CSS file. Um, and I would definitely suggest if you haven't used this or you haven't used less, which is another one, uh, I definitely suggest at least trying it because, uh, I was really hesitant to use this at first, too, because I had a really strict workflow, uh, when creating HTML 5 applications. Um, but when I did try it, I was really surprised at how easy it was to to integrate into my workflow and just how easy it was to use in general. Um, there's really no learning curve. It's it's pretty simple. Um, and uh there's just so much you can do. So, if you go to sasslang.com/guide, it'll show you all the major features that you can use. All right. So, basically, uh, variables are probably one of the the best reasons to use a a pre-processor. All right. If you want to change a color on your website or your application uh and you have 25 instances of that color through multiple stylesheets, that's going to be a real pain just to do that simple task. If you have variables, you can just throw that color in a variable like primary color and then go ahead and change that and then it'll iterate throughout all your stylesheets. Another really nice feature is the nesting feature or function. Basically, you can format your CSS just like your HTML. All right, so in this example, we have a navigation or a nav element, and then we're nesting inside of it the unordered list, the list item, and the link. All right, so this is pretty much how you would have it set up in your HTML as well. Um, so that's it's really nice for organization and just keeping everything really clean. All right, so partials basically when you use SAS, you deal with SCSS files. All right, and you you can break these up into subfiles and then just uh use the import directive to bring them all into one stylesheet. All right, so let's say you have a bunch of different buttons on your site. Okay, they're all styled differently. You might create an underscorebuttonscss file. All right, you may have a navigation SCSS file. All right, now you can use import and then bring them all into let's say a main.cscss file and then generate use your compiler to generate a main.css file which will include all the styles from all your partials. All right. And I'll give you we'll do that later on. Um mixins also awesome. Basically they're CSS functions. Um you basically use the syntax at mixin and then a name. Give it a name in this case border radius. And you can even have parameters. All right. So we have a parameter of radius which will take whatever 5 pixels 10 pixels. Um, and in this particular mixin, what we're doing is setting the border radius, but we're including all these um these uh vendor prefix versions as well. Uh, so you don't have to write all that out in your CSS. You can basically just do this. Okay, you can do include and then the name of the mixin and then plug in your parameter. In this case, 10 pixels. And you can have multiple parameters, you can have default values. So uh really helpful. All right. So extending and inheritance uh basically if you have experience with object-orientated programming um then you'll you should have no problems understanding this. Uh basically in this example we have a class called message. It has a border padding and a color. All right. And then here we have a class called success and we're going to say extend message. So basically we're we're grabbing all of this and putting it into the success class. And then we're just going to change the border color to green. And same thing for error and warning. All right. So that's very helpful. Operators, you can do all kinds of math. You can do percentages and uh division, multiplication, things like that. And another thing that's not on here is you can actually use if statements. All right, you can have if statements. You can use loops, you can use four loops, each loops. Uh there's just a ton that you can do. So, like I said, if you've been hesitant to try something like this, uh I would definitely encourage you to to go ahead and do it. Um we're going to get this up and running. Basically, uh SAS runs on the Ruby programming language. So, you'll need to install that. And if you're using Windows like I am, then the easiest way to to install Ruby is to use something called Ruby Installer. Uh, so let's go ahead and grab that. So I think it's got Ruby Installer.org. Yeah. So you want to click download. And there's two things we're going to download. We want the actual Ruby language, which is right here. I have the 64bit version. So, I'm going to download that. And there's also something called the devkit or the development kit. And that's going to allow us to do certain things in the command line, um, such as install Ruby gems, uh, things like that. So, you want to get that as well. But first, we'll install the actual Ruby. Okay. Okay, so the default directory for me is going to be Ruby 200064. And you want to add Ruby executables to your path environmental variable. So check that and also check associate RB and RBW files. Okay, so we'll install that. And that's it. Ruby is now installed. So let's go ahead and grab the development kit. Um 64bit. So I'm going to get this one. And that's going to download. And I should also mention you need to have Java installed. Um, so you probably have that, but if you don't, just uh just download Java. And also Adobe Air. Uh but I believe if when we go to install Ruby um I'm sorry when we go to install Scout which is the compiler tool uh it'll give you the option to install Adobe Air. So let's go ahead and run that. Sorry about that. Uh, so what we need to do is we're going to extract the devkit. And you want a folder to extract it to. And what I usually do is go to my C drive and create a new folder called devkit. All right. So that's where I'm going to extract it. All right. So, now that that's done, you want to make sure that those files are in there. So, it should look like this. All right. So, now we have Ruby installed and we also have the devkit installed. So, what we need to do now is run a couple commands. So, we want to go to the start menu and then in the search box, cmd enter. All right. So, what we want to do is navigate to the devkit directory. So, I'm going to say cd and I want to go to my C drive and then cd devkit. All right. And I'm going to run ruby um dk.rb init. All right. So that's the initializer. Now we need to run ruby dk.rb install. All right. Um I actually had devkit. I had this installed at one point. So you might see something different here. Um, now what we need to do is make sure that the Ruby environment is using DevKit correctly. All right, we can do that with gem install JSON um platform equals Ruby. All right. So, that's good. Now, we just want to install SAS. So, gem install SAS. So, SAS is now successfully installed. Okay. So, we can go ahead and start to um create our our application or website, whatever you want to call it. Uh and then we can compile from the command line. But I want to do something a little easier. And I want to use a tool called Scout. See, Scout, I'm not exactly sure of the website. This is so I apologize for this slow machine. It's a virtual machine. All right. So, the URL is mhs.github.io/scoutapp. All right. And we want to click download for Windows. And I will be making a video for how to get this all set up in with a Mac as well. All right. So, let's see. Add shortcut. That's fine. Installation location is program files. That looks good. All right. So, this is the scout interface. Um, I it kept my old project. I'm going to remove this. All right. So, you should see this. Before we do anything here, we need to create our project folder, which you can create anywhere. Uh, I'm just going to go to my C drive and create a new folder called projects. and then create a new folder called my project. All right. And then this will be your website or your application structure. So I'm going to create a CSS folder. We want to create an SCSS folder. And that's what we'll be working in. And then we'll create a JavaScript folder and an images folder. All right. So now we'll go back to Scout and click on this little plus sign. And you want to choose the project folder you just created. Okay. So my project and then you want to choose the directories. The input folder is going to be your SCSS folder. And then the output is going to be where the generated CSS files go which will be CSS. And we can also choose our JavaScript folder and our images folder. All right. And then down here, you can have development mode or production mode. Basically, development is just going to keep all the it's going to have comments in the CSS file, stuff like that. Production will wipe all those out. Um, and then we can choose to have it compacted or compressed or expanded, which I'm going to keep. All right. So, I'm just going to leave it at the the default. And then we want to go and click this little play icon. And we should get an error. So, basically, we got this error because there's nothing to compile. All right. Now, if you got an error, a popup message that says something about uh argument error 3214, something like that, then you need to install Java. All right? That's usually what that means is that you don't have Java installed or it can't find it. Um, so make sure you do that. Now, what we're going to do is create our HTML file and we're going to create our main SCSS file, which Whoops, not a folder. Sorry about that. We want to create a new text document. called main.scss. All right. So now let's open that up. I'm going to use Notepad++. Okay. So I'm going to open. Let me get rid of this. I'm going to open that and I'm going to also open the HTML fold uh file. All right. So let's go ahead and create a basic structure. So I'm going to use the HTML 5 doc type. We'll say my SAS project. All right. And we want to link our stylesheet, which we don't have, we didn't create yet. We're actually going to let Scout generate it, but we just want to set a link to it. So, link reel stylesheet href is going to go to CSS slash and we're going to call it actually we'll leave it at main.css. CSS, not SCSS. CSS. Okay. So, we'll save that. Now, what I want to do is go back into Scout and click play. All right. So, right now, you can see how it's changed to the stop. All right. So, if we want to stop compiling, we can click that. But right now, no matter what we do, if we create SCSS files and save them, they'll automatically be compiled and then put into the CSS fold file. All right. So, basically, we have main.css. Let's go ahead and say body, and we'll say background, and we'll give it a black background. Okay. Okay. So, if I save that, you can see right here it says change detected at main.scss. So, it then over overwrote the main.css. So, if we go and open up CSS main, you can see that it's got it. It's in there. And we also have the comment that says where the line is. All right. That's because we have it in development mode. So, if we open up index in a browser, just close this. If we open up index, it has a black background. All right. And we can change inside of our SCSS file. I'll change it to red. Save. And you can see that it it updates it in real time. You don't have to keep pressing compile. All right. When you're done, you can click stop. All right. and then it'll stop generating changes. Um, and then when you're ready to start developing again, then just come in here, press play. All right. So, that's that's the only real difference in your workflow is that uh at the beginning and end of your development session, you just want to click play and stop and scout. All right. So, now I want to demonstrate some of the features and we'll start with variables. Actually, you know what? We'll start with partials. So, in our SCSS file, we have a main SCSS. Um, you don't want to just keep one uh and that's it. Uh, because that kind of defeats the one of the purposes of using a pre-processor. All right. So, we want to create different folders. All right. So, what I usually do is I'll call one folder modules. I'll call another one base. and then maybe layout. All right. So in base I will have an underscorebase. SCSS. Now the reason for the underscore is that if I don't have that underscore when scout goes to compile our CSS, it's going to also generate a base.css file. And I don't want that. The only file I want it to create is main.css. All right, so you need to have the underscore. Um, so this will basically be all my base like paragraphs, headings, things like that. Just that the base styles and I may also have a reset file. All right. So, that would be if you use like the maybe the Eric Meyers reset file or something like that. Um, you could put in there. Um, so that that's it for now. For base. For layout, I do something like header and footer. So all the styles for the header and footer would go there. Modules. Okay. So in modules I do like uh buttons. Um let's see. Sometimes I'll use a block block blocks and that'll be like, you know, sidebar blocks, different versions, different um may have a primary box and a secondary color box, things like that. Uh and then maybe like components. Okay. So, in here I'd put like alerts, um, progress bars, things like that. And you usually would have this kind of structure with with an application, not just a a HTML website. You don't need all this stuff just to build a small website. This is more for application stuff. Um, and then I'd have a typography.css, SCSS and this should have an underscore. Okay. And this would be like my headings um special heading classes, different colors, things like that. All right. And then in our main, go back to our main one. And I won't have any styles in here at all. It will be all imports. So we would have like um import say import what do we have base slashbase actually yeah oh another one that is very important inside of base that I usually have is variables variables and also mixins Okay. So, we'll include those. Basically, variables I would do first and then mixins and then base. And what else? Reset would go before base. Actually, reset would go. Now, reset would go right here. All right. And even though that the file names have underscores, um, actually, yeah, we should include those as well. Uh, I'm not sure if we should, but let's just give it a shot. Okay, so that's all our base files. Next we would have what do we have? layout and then we would have our modules. So buttons actually probably do typography. So buttons, blocks. Is that all of them and components? All right. So we're importing all these into this file. So we don't the browser doesn't make any extra HTTP requests for these. That's why it's okay to do this. If you were to import all these in in a regular CSS file, then you may see some performance issues. Um so uh it's just nice to really compartmentalize your diff your different aspects of your application or your website. All right, so let's just add a little bit of HTML. We're not going to build an actual website. I just want to uh just kind of demonstrate some some stuff here. So, let's go ahead and create a div container and we'll put in a header. So, we'll call this my project. All right. And then maybe have our navigation. That's another one that I I use a lot is navigation um SCSS or nav. And in here we'll have a ul. Oops. All right. And then maybe have a section and then a footer. All right. So, reload. There's our awesome website. So, let's um start with the container. Uh we'll actually start with the body. So, basically, where's my uh I want to use base. Okay. Okay, I want to go to my base file and that's where I'm going to put my main body styles. All right, so font family, let's use Georgia. Okay, font size, we'll say 14 pixels, not font size. All right. And then color. We'll do like a really dark gray. Line height. All right. And then we'll do the container 960 pixels margin auto and overflow auto. And for the body uh let's do a background of light gray container. We'll also give a border. All right. Um, let's see the container. Oh, this should be an ID. All right. So, the container, let's give a background of white. We can give it a border radius. of five pixels and that's good. Say the header give it a background uh we'll say 003 D99 which is a bluish color and then the font color will be white. Okay, let's actually add a reset. So, I'm going to open up actually, you know what? I want to pull my project up over here. Okay. So, let's open up base reset. And I'm just going to do a global reset here. All right. And then in base, I'm going to make my header have a height of 90 pixels. Okay. The header H1 say padding from the top 20 pixels top, right, bottom, and left. And let's move the whole container down a little bit. So the margin we'll do 20 pixels auto. All right. and the navigation. Okay, we'll give it a height of 30 pixels and a background of black, color white. Okay. Okay. And then we'll do the nav li. And back in the reset file, I'm also going to put uh list style none. Okay. So, we'll float to the left. Padding. Uh zero. We'll do 20 20 and then the lengths should be white. What am I doing? I get ahead of myself. All right. So, there's our navigation. I I realize it doesn't look very good, but just doing this real quick. 10 pixels. Let's give section a minimum height 200 pixels and then footer text align center. All right. Okay. So, good enough for for what we need to do here. Um, I realize it's very ugly. So, basically, let's look at using variables. All right. So, what I'll do is go into my variables SCSS file and I'm going to set let's set a header. Not actually not a header. Let's set a primary color. And I want to set that to that blue which is in the header. So it's right here. I'm going to grab this and I'm just going to replace this with primary color. And then go ahead and put that in here. All right. So if I save that should now still be the same. All right. And then secondary color, we'll do black. Actually, we'll do like a dark dark gray. And we'll put that in for our navigation. All right. Now, you can see that if I misspell a variable here and save it, it'll actually give us the error and tell us the line number, which is really cool. All right, so let's say the footer, let's go. I'm going to break this up and put it into our files afterwards that we created, our footer and header files and things like that. Um so footer I'm going to do padding 20 pixels. Background um background will be primary color. Okay. And text will be white. Okay. So let's break these up. And uh basically I'm also going to create a navigation in my layout my layout folder. Call it nav.scss. All right. Make sure we go and include that here. All right. And then I'm going to grab all the navigation CSS. Okay. And then we'll grab the header stuff. Put that inside header. Save. And then go back to base and get the footer. Okay. Okay, put that in footer. All right. Now, if I save and we go back and reload. Okay, we have a issue here. Invalid CSS after layoutnav. What did I do here? Import layoutnav. Oh, I don't have a semicolon. All right. So if we want to change the main let's let's just say we have a bunch of pages uh with this color everywhere. All right. So instead of having to just go and change every single instance, we can go into variables and say primary color and let's just say red. All right. So that's going to change everything to red. All right. So that's that to me is is well worth um the extra workflow which basically isn't much. Maybe running running the scout program and um breaking your CSS up into different files is probably the the the only extra work that you're going to do. And breaking them up into these files is actually more helpful because everything's compartmentalized and you know where everything is. you know that if you want to add um whatever if you want to change the border in your header, you know where exactly to go for that. You know it's going to be right in here. All right. So huge advantage. Um so I want to demonstrate a mixin now. Um basically let's go to base and we have our border radius. Just doing this um isn't you shouldn't do that. You should also include the vendor prefix at least WebKit and Moz. You want your your application or your website to look good on in all browsers. Um, so basically instead of having to write this, it'd be better to just say include border radius and we'll say 10 pixels. Okay. Okay. So now what I'm going to do is just grab this these three lines, cut them out, and go into my mixins, which is in the base. And I can just say mix in border radius and plug in radius and then just change all this to radius. All right. So that's a lot cleaner. Uh if we go back to base. Okay. So let's save this and see if make sure it still works, which it doesn't. Uh expected variable. Oh, you know what? I'm using the wrong. This needs to be No. No. That's right. That's right, isn't it? No, it's not right. This is actually less syntax. The um the other popular CSS pre-processor called less. And I would suggest picking one and sticking to it or you do this what I just did all the time. All right. So there we go. Now it's 10 pixels. Now we can also set a default. All right. So in our mixin, let's say the default 5 pixels and save and then go back to base and just say border radius. Okay, no no uh parameters at all and save and then reload. And you can see now we have a default of five pixels. All right, so we're running out of time here. Um, basically the last thing I want to show you is how to nest objects. um our next nest elements and we can do that in the header. Okay, basically we don't need to do this here. We can use SAS to take this and put it right in here but not have the header just H1. All right, so that's going to give us the same result as what we just had. All right. So, I think that's pretty much it. Let's take a look at the stylesheet that's been generated. So, CSS, main CSS, and you can see that it's heavily commented. Um, but it's all just standard CSS. If we look for, let's see, the header color. Where's the header? right here. Background red. All right. So, there's no variables or anything. It's just plain old CSS. We can take this application, this website, and uh totally delete the SCSS files and it'll be fine because it's just using what was generated. All right. So, that's all I'm going to do for now. I'm going to have some more tutorials on this on SAS. Um, we'll do we'll build an actual project uh rather than just this these little tutorials. Um, so please subscribe if you haven't already and thanks for watching.