This is paraphrased from my presentation at Refresh Seattle on March 25th. You can view the presentation or download the slides from Github.

I stumbled onto Sass last January, when I was struggling with large style sheets of several websites in various states of development.

I work on large, high-traffic websites mostly and maintain at least 10 such sites at any given time. A website that I have not worked on for 2 years or more would suddenly require updates, and I would have to re-learn (what I consider) atrocious coding practices of my old self. Sometimes, these websites acquire new designs based on seasonal promotions. It did not help that most of these websites had more than 5000 lines of CSS.

I started looking for solutions to my CSS maintenance woes. I briefly considered CSS frameworks, but these dump a set of properties irrespective of their usage. I also looked at LessCSS whose every-rule-is-a-reusable-snippet looked like an even worse maintenance nightmare. Sass looked most promising. I took a chance and am glad to have done so.

Sass stands for Syntactically Awesome Stylesheets. It is written in ruby and has command line tools to convert Sass to CSS, or CSS to Sass. It also includes a “watch” utility that watches a certain folder which contains the Sass files for any changes and automatically compiles updated Sass files to their respective CSS files.

Sass has a different syntax as compared to CSS. Here is a sample Sass file:

!bordercolor = #000
div.content
  border = 1px "solid" !bordercolor
  h2
     padding: 1px

This is how the generated CSS looks:

div.content { border: 1px solid #000; }
div.content h2 { padding: 1px; }

Sass is not white-space agnostic, and you need to be careful with the indentation as that decides which parent selector the child selector belongs to. If you would like to learn how to use this in detail, head over to the Official Sass tutorial.

Sass has lots of features, most of which can be found in the reference documentation. My favourite elements of Sass are: Mixins, Variables, Sass comments, @import directive, Functions, If/For/While directives, and Output Style formatting. Several more are undocumented, or are better explained in the mailing list.

Compass is a framework built on Sass that makes it easier to use it stand alone on non-ruby projects. Several features that have made into the latest releases of Sass were first created in Compass by Chris Eppstein. Compass makes available many CSS Frameworks like Blueprint, YUI, and Susy for use in your Sass files. There is an hour-long introduction to Compass which is definitely worth your time if you are looking to use Sass/Compass in the long-term.

Recently, Nathan Weizenbaum, the maintainer of Sass, has released FireSass, a firebug plugin that renders the line number and the Sass filename from which a selected HTML element gains its properties instead of the line number and the CSS filename. This makes debugging your stylesheet lot easier if you use Sass primarily.

Nathan is also working on getting Sass 3 beta version out live. It will include a new format called SCSS which replicates the CSS syntax (like LessCSS).

While Sass has a lot of tools, and is quite powerful, it is not necessary that you have to use it. I would recommend you use it only if you:

• Have large CSS files that you intend to maintain over a long period of time (in which case, converting them to multiple Sass files is a good idea).
• Deal with several websites with markedly different style sheets but would like to create a common library of styles that you can invoke when necessary without writing additional code.
• Write CSS for a living.

Sass is not the answer for your CSS ills. You still need to know how to write CSS and your Sass file can be a noodlesoup of unmaintainable nested selectors if you are not mindful.

If you use Textmate, there is a Ruby Sass Textmate bundle to make it easier to type Sass syntax. There is also a Compass bundle that lets you look up mixins available in Compass.