 And then other weird things start happening and that are not good and then you're like, okay Well, there needs to be a better way Another thing repetition you constantly repeating yourself with CSS and obviously I at some point This just proves the point of why repetition can sometimes not be good because I misspell repetition after the first time and And So that's kind of why sass is really great because you can just use a part of your CSS And then reference it later instead of constantly repeating it over and over and over again, and that can also drive you crazy And then the other thing was oh my god. Where was that button hex color? Where is that freaking button hex color? You can't like figure out how to change it That can be really frustrating to especially if you're like off by like one Number in the hex number you're like searching for that one hex number But it was off just a little bit for whatever reason and then you can't find it in the craziness of your CSS style sheet So yeah, those are some possible hurdles How sass can make your life easier is can make it more organized and it can actually modularize your CSS Like like I was saying you can use things like variables where you just say okay This is like my primary color. It's a variable and then at the very top you reference what that What what that is instead of constantly having to change change all the instances of it? So that's really great with variables off the bat And then also you can use partials But you can have your own style sheet just for a particular piece of CSS and then import it in the sass file And then it will just import that so it's really helpful So you can keep things more organized and see where everything is instead of having one huge CSS file That's hard to find things And more sanity as a result And you can also use libraries out there bourbon and meet are really great So meet is actually a responsive grid just like sometimes sometimes people use bootstrap And it's all works nicely with sass and then bourbon is a mix in library where you can utilize the entire library of What they have and instead of like recreating everything from scratch you can just import what they have to Use on your own and it's all open source. So it's free So how you want to get started with sass? There are some dependencies. You need to have Ruby Installed before you install sass. So if you're using a PC Ruby does not come installed. So you will need to install Ruby First if you have a Mac sweet, you're already up and running with Ruby So then you just need to download and install sass So in order to install sass on your computer You can either do it with an application such as code kit or compass or scout And as you can see some are paid and some are open source compasses open source or you can use your terminal and Just hit gem install sass now when I did it on my Mac. It gave me a bunch of errors So what you want to do is instead of writing if you run into errors Just hit sudo gem install sass and that should give you the writing permissions to install it on your computer So just general rule of thumb if you're on terminal and you're wanting to Install something and just giving you errors just put sudo before it and see if it works usually does So variables this is an example of a variable at your at the very top of your CSS style sheet You would put like a font stack and then reference whatever that font is going to be the Money sign is basically what? Signals to sass that hey, this is a variable so it'll references at reference it at the top So let's say your client is telling you that okay I know that we really wanted to have the website be blue, but now we changed our mind and we wanted to be all fuchsia So you're like great. Okay. Now I have to change every instance But if you use sass then you can just at the very top of your style sheet change primary color to whatever that fuchsia color is and that will save you some time and frustration and then nesting nesting is really Cool because it uses it almost uses like a different way of formatting things so instead of having like Like nav and then putting you L and then putting your style it's got all of it nested underneath it So for nav everything in nav the UL for that would be this the li would be this They would be this in that kind of a format instead of going crazy with you know a bunch of different UL Nav this particular element over and over again The only thing with nesting you need to be careful not to go crazy with it because then that can be complicated If you nest within nest within nest within nest that can be really crazy and cause problems So mixings are mixings are really great and that's what bourbon is bourbon has a whole library of mixings Which is awesome. So as you can see it's almost it's kind of mathy. It's almost algebraic in a way because you're using variables So at the top you would just say here's a mix-in for border radius and then You would put the 10 pixels so that would actually be insert into the variable for radius So when it actually outputs, this is what it would be at the bottom So we're just putting 10 pixels into this radius and then it outputs it for you So sass is extremely smart and it'll kind of do all this work for you And basically how it works is sass will actually compile this CSS So once it does all of its magic, it'll take whatever CSS you have in other files like partials And it will all bring it all into one CSS file And just bring it in context if you wanted to start sassing away and your WordPress themes There are some starter themes that already have it built in Some like it is a good one And I really like that one it has all of the dependencies listed there And it takes you step by step on how to get it installed onto your computer So like for example that one you're also going to want to install node and Rent to kind of that will basically watch this your sass file And it will compile the CSS every time you make a change to your to your CSS or your scss Sass file it will automatically compile it to CSS for you instead of you having to do it manually So that's really great And then there's also a couple of other There's actually a lot of WordPress starter themes out there all open source. They're all on github So you can pretty much just find ones that you like and mess around with it. So And then here's some helpful links Sassling that's actually the website for sass Bourbon where she can also very quickly get over to meet from that website And also upload the slides as well for you guys So you don't have to like write it all down right now And then some other tools if you want to install Sass with your terminal. I use iterm 2. It's pretty good And then this is the website for Ruby to install the dependency of sass And then homebrew is also really great if you are going to use terminal I would really suggest that it's very helpful And then node as well if you do want to have a package manager to watch your sass for you and using So for using something like that where you watch sass and it compiles a CSS for you for you automatically There are three options run goal and web pack. I've heard a lot of really great things about web pack I haven't used it personally, but I've heard I've heard from a few people that it's really awesome And it's kind of like the newer thing so be fun to try out So that's that's it. Does anyone have any questions? Right like I know some like it neat has a grunt file in there So you would just npm install and it will it will basically install the dependency Dependencies for you and then yeah, so the grunt file how has all that in there package for you They may and they have all the documentation on their get hub page They'll tell you be exactly step-by-step how to install everything and how to use it Yeah, I know there's there's definitely a way to do that. I haven't I haven't actually done that yet I've always like worked with something that had CSS already installed, but there definitely is a way to do that Not on me right now. I'm sure you could find that like on a get hub page or something like that. Oh We're talking about optimizing like performance Well, it's still going to output your CSS So I'm guessing it depends like how you would how you would code it But I don't normally think like sass or CSS would like make your page load slowly More so than other things, but I'm not an expert on that Yeah, that's true. You could minify that's that's a good minify your CSS file and your JavaScript file would be good for that Though it's not really something related to sass. It's just something that you would want to do after after you create the file Homebrew is It's brew dot It's a package manager, so I Find it I find it kind of useful because you can do homebrew and and see Where things are like for node I I just used it to find out what what I had installed a node and to see where things are So it'll kind of like it's almost like a doctor. It'll say like hey you need to Like clean your your kegs or sellers or whatever and it's just kind of helpful for that. Thanks