What is Sass?

Quoting from the Sass documentation:

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

It allows us 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. But the chapter is titled SCSS; why are we talking about Sass? Well, Sass and SCSS are pretty much the same CSS preprocessor, each with its own way of writing the pre-CSS syntax.

SCSS was developed as part of another preprocessor named HAML (http://haml.info/) by Ruby developers, so it inherited a lot of syntax style from Ruby, such as indentation, no braces, and no semicolons.

A sample Sass file would look like this:

// app.sass 

brand-primary= blue 

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

=border-radius(!radius) 
    -webkit-border-radius= !radius 
    -moz...