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.

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. 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.

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. A much faster way is to run “compass watch” instead, which watches the sass/.scss files for modification and auto-recompiles.