Getting started with Drupal7, Zen, Sass and Compass

Last updated March 12, 2013. Created by ibot on April 26, 2012.
Edited by akamustang, caschbre, thamas, JohnAlbin. Log in to edit this page.

With Zen 7.x.5 you can take advantage of new techniques for more efficiently writing CSS.

Install Sass

Sass is a language that is just normal CSS plus some extra features, like variables, nested rules, math, mixins, etc. If your stylesheets are written in Sass, helper applications can convert them to standard CSS so that you can include the CSS in the normal ways with your theme.

sudo apt-get install rubygems
sudo gem update
sudo gem install sass

Note: If you already have Sass installed, verify that you have at least version 3.2.

sass -v

Install Compass

Compass is a helper library for Sass. It includes libraries of shared mixins, a package manager to add additional extension libraries, and an executable that
can easily convert Sass files into CSS.

sudo gem install compass

Install Zen (or Zen Grids)

Download Zen 7.x-5.1 or later from http://drupal.org/project/zen. Then create a sub-theme.

Zen includes Zen Grids automatically, so there’s no need to install it separately. However, if you ever want to use Zen Grids on a non-Zen theme or non-Drupal project, you can install it separately.

sudo gem install zen-grids

Developing with Sass & Compass

To automatically generate the CSS versions of the scss while you are doing theme
development, you'll need to tell Compass to "watch" the sass directory so that
any time a .scss file is changed it will automatically place a generated CSS
file into your sub-theme's css directory:

compass watch <path to your sub-theme's directory>

If you are already in the root of your sub-theme's directory, you can simply type:

compass watch

While using generated CSS with Firebug, the line numbers it reports will be
wrong since it will be showing the generated CSS file's line numbers and not the
line numbers of the source Sass files. To correct this problem, you can install
the FireSass plug-in into Firefox.

Developing with Zen Grids

Zen Grids is an independent project from the Zen theme. You can use Zen Grids on any website, no matter how its built (hand-written HTML, YAML, Jekyll, Joomla, WordPress, whatever). The Zen Theme includes Zen Grids because it makes building layouts really simple. (The comments below may be a bit confusing. So, just to be clear: you don't have to install Zen Grids separately when you want to create a Zen subtheme.)

On the Zen Grids website (http://zengrids.com), you can:

• Discover why building responsive layouts requires using a CSS preprocessor like Sass
• Learn how to use Zen Grids to build layouts
• Find a complete reference to all of Zen Grids’ variables, mixins and functions

Moving your CSS to production

Once you have finished your sub-theme development and are ready to move your CSS files to your production server, you'll need to tell sass to update all your CSS files and to compress them (to improve performance). Note: the Compass command will only generate CSS for .scss files that have recently changed; in order to force it to regenerate all the CSS files, you can use the Compass' clean command to delete all the generated CSS files.

• Edit the config.rb file in your theme's directory and uncomment this line by deleting the "#" from the beginnning: #environment = :production
• Delete all CSS files by running: compass clean
• Regenerate all the CSS files by running: compass compile

And don't forget to turn on Drupal's CSS aggregation. :-)

Check zen/STARTERKIT/sass/README.txt for updates.

More resources

• A short tutorial on introducing, installing and using sass/compass: http://thesassway.com/beginner/getting-started-with-sass-and-compass
• Slides about Drupal and Compass: http://www.slideshare.net/nathansmith/drupal-compass