Course Overview2:30 with Guil Hernandez
In this course, we'll walk you through the process of converting a simple website over to Sass, the most mature and most widely used CSS preprocessor.
[MUSIC] 0:00 Making the jump over to Sass can be an intimidating experience. 0:04 At first, you'll hear about variables, mixins, extends, or 0:08 other scary sounding things like functions and interpolation. 0:12 Then there's the scariest of all the scaries, the command line. 0:16 [SOUND] It's okay. 0:19 I once felt the same way. 0:22 But it doesn't have to be this way. 0:24 If you're still not sure where to begin when converting CSS over to Sass, 0:26 this is the place to start. 0:30 I'm Guil, and in this course, 0:31 we'll walk you through how to convert a simple website over to Sass, 0:33 the most mature and most widely used CSS preprocessor out there. 0:37 And we're gonna work with a project that we're already familiar with. 0:41 We'll take the Lake Tahoe website, 0:44 we built back in CSS basics, convert it to a Sass project, 0:46 then refactor CSS using some of the most valuable features of Sass. 0:49 But before we move on, let's do a quick refresher on Sass. 0:55 So, by now, we may know that Sass is a CSS preprocessor, that extends CSS. 0:58 And by preprocessor, I mean that it's a layer that sits between the Sass 1:04 stylesheets we write, and the CSS file we serve to the browser. 1:08 You see, browsers don't understand Sass syntax. 1:12 So that syntax needs to be translated 1:15 into plain CSS before the browser can actually read it. 1:18 And that's what the Sass compiler does. 1:21 It translates or compiles Sass to CSS. 1:23 So, now you may be thinking, why even bother switching over to Sass? 1:28 What's wrong with plain old CSS? 1:32 My workflow's fine. 1:34 Why try to fix something that isn't broken? 1:35 Well, on the surface, CSS may seem like an easy language to understand and work with. 1:38 But the reality is, CSS can be difficult to manage, and depending on the size of 1:42 the project, it can be fragile, repetitive, and tedious to work with. 1:47 Now, this isn't a roast on CSS. 1:51 I still appreciate plain CSS and use it on certain projects but 1:53 Sass empowers stylesheet authors to write CSS the way it's meant to be written, 1:57 clear efficient, and easily maintainable. 2:02 Once we have our project up and 2:06 running with Sass, we'll see how Sass can totally change the way we write CSS, 2:07 and make our jobs as designers and developers a little easier. 2:11 The goal of this course is to help clear up common misconceptions 2:16 you may have about Sass and help you fit Sass into your front-end workflow. 2:19 Hopefully, it'll make you feel more confident about writing Sass and 2:23 get you excited about using Sass in future projects. 2:26 Let's get to work. 2:29
You need to sign up for Treehouse in order to download course files.Sign up