80beans

Syntactically Awesome StyleSheets

Syntactically Awesome StyleSheets, or simply “Sass” is a great way of structuring your CSS using Ruby syntax. It spices up writing your CSS in several ways (use constants, do calculations, etc), with the most notable feature being the ability to use nested rules. This turns this:

#main
  :width 97%

  p, div
    :font-size 2em
    a
      :font-weight bold

  pre
    :font-size 3em

into

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

Just save your Sass file as public/stylesheets/sass/application.sass (filename may vary), and Sass will generate a public/stylesheets/application.css. This file will be re-generated after making changes to your *.sass file. Don’t forget to set an ignore property on your *.css files, since you don’t want to have those under version control.

We decided to use it for all our new projects, which has boosted our CSS productivity. Because of the structured syntax, also the not-so-CSS-savvy programmers can easily find what they are looking for in the CSS file. Highly recommended! See the above mentioned website for detailed installation and usage instructions.

Tip: to convert your plain old CSS to Sass, use the “css2sass” command line tool (included with haml): css2sass oldfile.css newfile.sass.