Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Sass Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up