Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.

“Using SASS has not only improved my CSS, but also the page structure/layout, and decreased IE headaches. Super highly recommended.” - Matt Darby
“If I were to write a post about how much Haml and Sass have changed the way I develop for the web … I’d write an elaborate sonnet about how Sass makes CSS almost usable for developers who like to keep things DRY.” - Jack Canty, Hoopla!
“I am a huge fan of Sass (Syntactically Awesome Stylesheets) for styling Rails applications. I have been using it on all of my projects for quite a while now and have developed some great techniques that make it much easier to organize, write, and read stylesheets in an application. … Sass retains most of the same “feel” when writing the code as vanilla CSS. It simply adds more power and better organizational tools, making it an easy choice as a go-to replacement.” - Michael Bleigh, Intridea

Beauty

Sass does away with the unnecessary brackets and semicolons of CSS. Properties are nested beneath selectors, and each property gets its own line. 

// Sass

h1
  height: 118px
  margin-top: 1em

.tagline
  font-size: 26px
  text-align: right

/* CSS */

h1 {
  height: 118px;
  margin-top: 1em;
}

.tagline {
  font-size: 26px;
  text-align: right;
}

Nesting

Sass avoids repetition by nesting selectors within one another. The same thing works with properties. 

// Sass

table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.2em

/* CSS */

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Variables

Use the same color all over the place? Need to do some math with height and width and text size? Sass supports variables as well as basic math operations. 

// Sass

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

/* CSS */

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Mixins

Even more powerful than variables, mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. 

// Sass

=table-scaffolding
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

=left(!dist)
  float: left
  margin-left = !dist

#data
  +left(10px)
  +table-scaffolding

/* CSS */

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}