Start a free Courses trial
to watch this video
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up