SASS (or SCSS) is a preprocessor for CSS .

SASS vs. SCSS

SCSS

SCSS uses the file extension .scss and is a superset of CSS (with a few exceptions), which means all valid CSS is valid SCSS as well.

SASS (The Indented Syntax)

This was the original syntax and uses .sass.. It doesn’t use curly braces but instead relies on intentation.

Advantages over CSS

Nesting

Instead of writing this in CSS:

header a {
  color: red;
}

header h1 {
  color: blue;
}

you can write the following:

header {
  a {
    color: red;
  }
  h1 {
    color: blue;
  }
}

This vastly improves the readability of CSS files.

And more

There’s a lot of features that make SASS super powerful, check out the documentation for more information.