Welcome to SASS

SASS is Syntactically Awesome StyleSheets. It's CSS with all the extra syntax that you may have always longed for.

CSS is the language we use to apply styles to HTML pages. It's a lovely, simple little language which allows us to select parts of the DOM, and apply style rules to those parts. It is now quite old, and perhaps lacking in a few features. The simplified syntax, so liberating when decorating a small DOM, becomes limiting at scale.

SASS attempts to address these limitations.

What about LESS and SCSS?

Less is a competing specification. It is very similar to SASS, but slightly less feature rich, and not as widely supported. Most of what we learn here will also apply to LESS.

SCSS is a dialect of SASS. Most of the time, when we write SASS, we will be using the SCSS variant of it. One of the great things about SCSS is that any CSS file is also valid SCSS, so you can start using it right away without learning anything.

What does SASS give you?

Variables - so you can share sizes and colour names.

Nested selectors, so you can namespace your stylesheets.

Maths, so you can calculate widths dynamically.

Includes - so you can split your code across multiple files.

Functions - so you can extract parts of your code.

Mixins - so you can define common functionality and apply it in multiple places.

Inheritance - So things can extend from other things.

The generated code is sensible, short, nicely optimised CSS. If the compiler can simplify what you have written, by combining selectors for example, it will do so.