What is Sass?

According to the Sass documentation at http://sass-lang.com/documentation/:

"Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well organized, and get small stylesheets up and running quickly."

In simpler terms, Sass makes CSS programmable. You may wonder why, if the chapter is called SCSS, we are talking about Saas. Well, Sass and SCSS are pretty much the same CSS pre-processor, with each having its own way of writing the pre-CSS syntax.

Sass was developed as part of another pre-processor named HAML (http://haml.info/) by Ruby developers. So, it inherited a lot of syntax style from Ruby, such as indentation, no braces, no semi-colons, and so on.

A sample Sass file looks like this:

// app.sass

brand-primary= blue

.container
    color= !brand-primary
    margin= 0px auto
    padding...