SASS Introduction7:04 with Nick Pettit
In this video, you'll get an overview of SASS, a tool that allows you to write CSS more easily. You'll also walk through the process of installing SASS.
[?mellow guitar music?] 0:00 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 0:03 [CSS Frameworks - SASS Introduction with Nick Pettit] 0:07 In the previous video, we introduced the idea of CSS frameworks. 0:13 Now let's take a look at SASS. 0:17 As I mentioned in the previous video, 0:20 SASS is an acronym that stands for Syntactically Awesome Style Sheets. 0:22 And SASS is a very powerful tool that you can use to enhance your CSS 0:26 with things like variables, mix-ins, nesting, and more. 0:32 We'll get into all of that in a little bit. 0:37 Now, this chapter does focus on CSS frameworks, 0:40 but it's important to note here that SASS isn't actually a CSS framework, 0:43 but that's okay, because it is a powerful tool 0:49 and there is a very useful framework called Compass that's actually written in SASS. 0:52 We'll be taking a look at Compass in upcoming videos, 0:59 but before we can get into that, we do need to learn SASS first. 1:02 Now, before we can get started learning about SASS, 1:06 we have to get a few installation steps out of the way. 1:09 To use SASS, you need to first install the Ruby language. 1:12 This video is a more advanced topic, 1:16 so I'm going to go ahead and assume that you either already have Ruby installed 1:19 or that you know how to install it. 1:25 If you don't, you should definitely check out the Ruby chapter 1:27 which will help you get started. 1:30 Once you have Ruby installed on your computer, you just need to get SASS. 1:32 To do that, you actually are going to want to install the HAML gem. 1:36 If you don't know what HAML is, you shouldn't need to worry about it. 1:41 HAML is just an easier way of writing HTML, 1:43 just like SASS is an easier way of writing CSS. 1:47 To install the HAML gem, we just need to type $ sudo gem install haml 1:50 and if you're in Windows, you shouldn't need to type the word "sudo." 1:59 Now, this will take a little bit because it has to install the gem 2:04 and then it has to download all of the documentation. 2:08 Now, SASS is bundled with HAML 2:12 so to make sure we have SASS properly installed, 2:15 we just need to go ahead and type sass-v 2:18 and that will give us the current version. 2:22 So when this is finished installing, we can go ahead and try that out, 2:24 and I'll just type sass-v 2:28 and there we go--we can see that we have the current version of SASS 2:33 and at the time of this recording, that is 3.0.21, 2:37 which is also known as Classy Cassidy. 2:43 So let's go ahead and go back to the SASS website 2:47 and let's check out some of the examples down here. 2:51 SASS basically allows you to write CSS in a much more concise way. 2:54 When you write SASS code, it is then compiled down into normal CSS, 2:59 which oftentimes is much more verbose, 3:05 but it's what the browser sees and interprets. 3:08 So on the left here we have some SASS, 3:11 and on the right, you can see the CSS that it gets compiled into. 3:14 On the site, they have tutorials and documentation 3:19 but while we're still focusing on the broad brushstrokes, 3:22 it's important to realize that there are actually 2 different syntaxes 3:26 that are supported by SASS. 3:32 The older, more concise syntax is called the Indented Syntax. 3:34 This is the one that we'll be learning. 3:40 There is also, however, the newer SCSS syntax. 3:42 SCSS is an acronym that stands for Sassy CSS. 3:47 Now, many people prefer this syntax 3:52 because it is more similar to plain vanilla CSS and includes 3:55 curly braces and semicolons like you're probably used to. 3:59 In fact, any valid CSS3 style sheet is also valid SCSS, 4:03 so in a way, this syntax is actually an extension of CSS3 4:09 and it adds new features. 4:15 Both the older indented syntax and the newer SCSS syntax 4:18 have all the same functionality and will both be supported in parallel, moving forward, 4:24 so it really just comes down to a matter of personal preference. 4:30 I personally would recommend using the indented syntax, 4:34 but if you go through the next few videos and you find that it's a bit too unusual, 4:38 then you should definitely try out the SCSS syntax. 4:44 Now, before we move on to some serious SASS code, 4:48 let's create our first SASS style sheet, 4:52 just so you can see how easy it really is. 4:54 Now first, let's just take any of the SASS code on this website here. 4:57 Now, we can just go ahead and copy and paste this example, 5:01 and I'm going to go ahead and and paste this into TextMate here, 5:04 and I have a file already created called test.sass 5:10 so I'm just going to go ahead and save that SASS. 5:14 Now remember, the browser doesn't actually interpret the SASS code. 5:17 The browser is looking for CSS, so we need to translate the SASS code into CSS. 5:21 This might seem like a pain at first, but it's actually very simple 5:27 and it's something that we can set and forget. 5:31 So actually going back to our terminal here, 5:35 I've already navigated to the folder where I've just saved my SASS file. 5:38 So I'm just going to type in the command $ sass --watch 5:44 and I'm going to watch the file test.sass:, which we just created 5:50 and I'll put it into another file called test.css and I'll hit Enter there. 5:56 It says Sass is watching for changes and we can press Ctrl-C to stop, 6:04 and it just created the file test.css. 6:09 Now basically this command is telling SASS to go ahead and watch the CSS file 6:12 that we've just created, and any time we make any changes, 6:18 it will automatically output and/or update a normal CSS file, 6:21 which is ultimately what will be interpreted by the browser. 6:27 Now, in order for this to work, 6:30 we need to keep this terminal window open and running. 6:32 If we want to stop this process, we just need to hit Ctrl-C, 6:36 but we won't do that for now. 6:39 But now, if we make a change to our SASS file, 6:41 it will be reflected in the CSS file that gets generated. 6:46 We'll look at this more in the next video. 6:50 Now that you understand some of the basic mechanics of SASS, 6:52 we can move on to some more advanced techniques. 6:55 [?mellow guitar music?] 6:58 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 7:01
You need to sign up for Treehouse in order to download course files.Sign up