1 00:00:00,000 --> 00:00:04,775 [MUSIC] 2 00:00:04,775 --> 00:00:07,476 What do you get when you mix rocket fuel with your CSS and 3 00:00:07,476 --> 00:00:10,790 strap it to a skateboard and push it down a hill? 4 00:00:10,790 --> 00:00:15,035 As Hampton Catalan, the inventor of Sass once described it, that's Sass. 5 00:00:16,120 --> 00:00:19,440 I'm Gil, your front end web development teacher here at Treehouse. 6 00:00:19,440 --> 00:00:20,050 In this course, 7 00:00:20,050 --> 00:00:24,490 you're going to learn a more powerful way of authoring your CSS with Sass. 8 00:00:24,490 --> 00:00:27,439 While CSS is a valuable style sheet language on its own, 9 00:00:27,439 --> 00:00:31,267 the more you grow as a designer and developer, the projects you build and 10 00:00:31,267 --> 00:00:35,505 the style sheets you write get larger, more complex, and harder to maintain. 11 00:00:35,505 --> 00:00:40,080 Sass is a language that extends the capabilities of CSS. 12 00:00:40,080 --> 00:00:43,120 It makes your job easier by adding advanced functionality and 13 00:00:43,120 --> 00:00:45,950 time saving features to your CSS workflow. 14 00:00:45,950 --> 00:00:48,410 Sass is a CSS pre processor. 15 00:00:48,410 --> 00:00:51,390 Meaning it's a layer between the style sheets you write and 16 00:00:51,390 --> 00:00:53,490 the CSS you serve the browser. 17 00:00:53,490 --> 00:00:57,320 In web development, a preprocessor takes source code written in one type of 18 00:00:57,320 --> 00:01:01,770 language as input and outputs code that can be understood by another program. 19 00:01:01,770 --> 00:01:05,430 Browsers don't understand the Sass language, but they do understand css. 20 00:01:05,430 --> 00:01:08,930 So a style sheet written in Sass needs to be translated or 21 00:01:08,930 --> 00:01:11,980 compiled into plain CSS before the browser can read it. 22 00:01:12,990 --> 00:01:16,060 Why write stylesheets using the language browsers don't understand? 23 00:01:16,060 --> 00:01:19,860 Well, Sass helps you build your projects faster in a more flexible way using 24 00:01:19,860 --> 00:01:23,720 features that don't exist, or not fully supported in CSS. 25 00:01:23,720 --> 00:01:27,840 For example, with Sass you can create a variable to store any type of value, 26 00:01:27,840 --> 00:01:29,940 like a color, font size, or a number, and 27 00:01:29,940 --> 00:01:32,490 reference it multiple times in your stylesheet. 28 00:01:32,490 --> 00:01:33,920 Need to change a value later? 29 00:01:33,920 --> 00:01:38,190 Simply change it in the variable and the entire style sheet reflects that change. 30 00:01:38,190 --> 00:01:41,060 If you're repeating the same declaration across CSS rules, 31 00:01:41,060 --> 00:01:46,240 Sass let's you compose reusable blocks of style you can share with other rule sets. 32 00:01:46,240 --> 00:01:49,430 And instead of working with one large monolithic CSS file, 33 00:01:49,430 --> 00:01:51,480 you can split your files into partials or 34 00:01:51,480 --> 00:01:55,290 separate style sheets, which makes your styles modular and easier to find and 35 00:01:55,290 --> 00:02:00,060 edit, without creating additional HTTP requests that can slow down your site. 36 00:02:00,060 --> 00:02:03,480 Sass can help you do so much more, and the best part is that it's fun to write. 37 00:02:04,550 --> 00:02:05,470 The web design and 38 00:02:05,470 --> 00:02:10,210 development community has adopted Sass as their go to CSS extension language. 39 00:02:10,210 --> 00:02:13,110 That means that thousands of companies use Sass in their projects. 40 00:02:13,110 --> 00:02:16,865 So understanding Sass could also make you more employable. 41 00:02:16,865 --> 00:02:17,495 In this course, 42 00:02:17,495 --> 00:02:20,985 you'll learn to use the powers of Sass to boost your front end workload. 43 00:02:20,985 --> 00:02:24,555 The examples we'll cover will teach you why you should use SAS in your projects. 44 00:02:24,555 --> 00:02:27,875 And by the end, you'll be writing more efficient style sheets using code that's 45 00:02:27,875 --> 00:02:29,205 easy to read and maintain.