What is Sass?2:29 with Guil Hernandez
Sass is a stylesheet language that extends the capabilities of CSS. It makes your job easier by adding advanced functionality and time-saving features to your CSS workflow. Browsers do not understand Sass syntax, so a stylesheet written in Sass needs to be translated (or compiled) into plain CSS before the browser can read it.
[MUSIC] 0:00 What do you get when you mix rocket fuel with your CSS and 0:04 strap it to a skateboard and push it down a hill? 0:07 As Hampton Catalan, the inventor of Sass once described it, that's Sass. 0:10 I'm Gil, your front end web development teacher here at Treehouse. 0:16 In this course, 0:19 you're going to learn a more powerful way of authoring your CSS with Sass. 0:20 While CSS is a valuable style sheet language on its own, 0:24 the more you grow as a designer and developer, the projects you build and 0:27 the style sheets you write get larger, more complex, and harder to maintain. 0:31 Sass is a language that extends the capabilities of CSS. 0:35 It makes your job easier by adding advanced functionality and 0:40 time saving features to your CSS workflow. 0:43 Sass is a CSS pre processor. 0:45 Meaning it's a layer between the style sheets you write and 0:48 the CSS you serve the browser. 0:51 In web development, a preprocessor takes source code written in one type of 0:53 language as input and outputs code that can be understood by another program. 0:57 Browsers don't understand the Sass language, but they do understand css. 1:01 So a style sheet written in Sass needs to be translated or 1:05 compiled into plain CSS before the browser can read it. 1:08 Why write stylesheets using the language browsers don't understand? 1:12 Well, Sass helps you build your projects faster in a more flexible way using 1:16 features that don't exist, or not fully supported in CSS. 1:19 For example, with Sass you can create a variable to store any type of value, 1:23 like a color, font size, or a number, and 1:27 reference it multiple times in your stylesheet. 1:29 Need to change a value later? 1:32 Simply change it in the variable and the entire style sheet reflects that change. 1:33 If you're repeating the same declaration across CSS rules, 1:38 Sass let's you compose reusable blocks of style you can share with other rule sets. 1:41 And instead of working with one large monolithic CSS file, 1:46 you can split your files into partials or 1:49 separate style sheets, which makes your styles modular and easier to find and 1:51 edit, without creating additional HTTP requests that can slow down your site. 1:55 Sass can help you do so much more, and the best part is that it's fun to write. 2:00 The web design and 2:04 development community has adopted Sass as their go to CSS extension language. 2:05 That means that thousands of companies use Sass in their projects. 2:10 So understanding Sass could also make you more employable. 2:13 In this course, 2:16 you'll learn to use the powers of Sass to boost your front end workload. 2:17 The examples we'll cover will teach you why you should use SAS in your projects. 2:20 And by the end, you'll be writing more efficient style sheets using code that's 2:24 easy to read and maintain. 2:27
You need to sign up for Treehouse in order to download course files.Sign up