Drupal Zen theme and SASS

Zen is one of the best themes (in terms of solid, clean foundation) out there. And 7.x-5.x release is even better than previous ones. It comes with a drush command to create Zen subthemes in seconds. It also has very clearly laid out and documented CSS stylesheets in the css folder that allow easy modification of styles. But did you know that Zen comes ready with SASS stylesheets and a config.rb for usage with COMPASS?

What are SASS and COMPASS?

SASS is a stylesheet language that is a superset of CSS, to which it adds - variables, nesting, mixings, selector inheritance, and more. Basically, your stylesheets will be far more maintainable if written in SASS than in plain CSS. If you have done extensive theming and styling for Drupal or any other web technology, then you can imagine the benefits quite readily. Learn more at http://sass-lang.com/

Compass is a library of SASS mixins that make it very easy to use CSS3 features such as rounded corners, box shadows, gradients etc.

How to use Zen with SASS & COMPASS?

Create a new Zen subtheme - either by copying STARTERKIT directory to a new subtheme directory and renaming files and functions appropriately, or simply by running "drush zen 'My Theme' mytheme". Install SASS and COMPASS. Now, take a look at all the *.scss files in sass directory of your subtheme. Then take a look at the corresponding *.css files in the css directory of your subtheme. Each *.scss file gets compiled into a corresponding *.css file. All these files are very well documented, and if you have done any styling before, it will be quite obvious what the styling rules are for. Make some changes to *.scss files, and then run "compass compile" in your subtheme's base directory. This will recompile modified *.scss files and regenerate the corresponding *.css files. Now reload your site in the browser and you should see the effects of your changes. You can keep making edits, recompiling with "compass compile" and refreshing the browser. But a much faster way is to run "compass watch" instead. Once you run "compass watch" in your subtheme's base directory, it watches the sass/*.scss files for modification, and as soon as any of them get modified, it recompiles that file to regenerate the corresponding css/*.css file.

This whole process will make your Zen-based theme development much faster, cleaner, and maintainable.