In the last lesson, we introduced Sass as one of the most widely-used CSS preprocessors in the field of front end development. In the next few lessons we'll explore Sass further, discussing everything from its history, to its installation, setup, and usage. Let's get started!

Sass

The term Sass stands for "syntactically awesome stylesheets". (Yep, really.) It was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006 to develop stylesheets more quickly, make them easier to maintain, and provide styles some of the programmatic power traditionally reserved for programming languages.

Goals

In its documentation, Sass describes itself as:

...an extension of CSS that adds power and elegance to the basic language.

This statement is then explained further in the About Sass section of the Sass Guidelines:

Sass’ ultimate objective is to fix CSS’ flaws. CSS, as we all know, is not the best language in the world. While very simple to learn, it can quickly get quite messy, especially on large projects.

This is where Sass comes in, as a meta-language, to improve CSS’ syntax in order to provide extra features and handy tools. Meanwhile, Sass wants to be conservative regarding the CSS language.

The point is not to turn CSS into a fully featured programming language; Sass only wants to help where CSS fails. Because of this, getting started with Sass is no harder than learning CSS: it simply adds a couple of extra features on top of it.

That last point is especially important as we begin learning Sass: It's not necessarily an entirely new language, it's just adding a "couple extra features" atop the CSS we already know.

Syntax Examples

So, what does Sass and its "couple extra features" look like? How does it differ from the CSS we're comfortable with? Consider the following examples of typical Sass code from the documentation:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

Obviously there are a few things here we haven't seen before, like the $ symbol, the nesting in the nav rule, the % preceding a rule, or the @extend keyword. (Don't worry about what these do yet, we'll discuss in the next few lessons).

But despite these new additions, notice the styles look pretty familiar. They're reminiscent of the CSS we already know, with a few extra pieces of syntax thrown in.

Then, once processed by Sass, the code above would be output as the following CSS for use in the browser:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

Pretty cool, right?

Anatomy & Terminology

Before we begin installing Sass in the next lesson, let's quickly address a common point of confusion. As a CSS preprocessor there are actually two parts to Sass:

1. The Sass syntax we write in
2. The Sass preprocessing software that compiles this syntax back into CSS for the browser to use.

So know that the term Sass refers to both a program and a syntax. And to successfully use Sass in a project we must integrate both. In the next lesson we'll do just that, as we walk through installing Sass.