Using Sass and Compass in Drupal 7

When it comes implementing a none-Drupal technic in Drupal, sometimes things can get complicated. There are so many solutions flying out there to confuse people so when I was thinking using SASS and Compass in my Drupal 7 theme, I hesitated. But then I see the blue sky again.

Strongly recommend this slide from DrupalCon Denver this year, Matt and Nathan pretty much weeped out all my bafflement and answered pretty much all my questions about Sass/Compass in Drupal 7.

Briefly, if you already know how to use Sass and Compass, there might be a question pop up in your head: There are many ways to use it in Drupal 7, which one is the best?

A1. Sass/SCSS module

A2. Compass stylesheet tool module

A3. Sassy module

A4. None of the above.

And… the answer is 4, it’s simple and make it stay simple, to work close to the metal is the way to stay updated.

So step by step,

  1. Login to SSH on your machine

  2. Make sure you have Ruby: ruby -v

  3. If you don’t, install ruby.

  4. Install compass: gem install compass

  5. Create config.rb in your theme directory (Here’s an example, or check out Configuration Reference)

  6. Create some sass files in the sass directory you defined in config.rb

  7. On SSH, cd to your theme directory then run compass watch. It will keep compiling css files into the css directory you defined.

  8. In .info file, make sure the css files are added.

Then it’s working!! More tips check out the slides!

Using Sass & Compass in Drupal Theming