SASS

AT 7.x-3.x includes SCSS versions of AT's CSS files. If you have never used a CSS preprocessor like Sass its well worth giving it a shot - you can save a lot of time and effort using variables, mixins and helper libraries like Compass and Bourbon.

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.

To learn more about Sass, visit: http://sass-lang.com

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.

To learn more about Compass, visit: http://compass-style.org

Developing with SASS and 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.

If you do not want to use Ruby and the command line you can check out the Sassy project for Drupal: http://drupal.org/project/sassy

watch not working?

In some cases the "watch" may not work. We have had at least one report of compass watch not working on a linux box and a suggestion was provided for how to work around this:

while sleep 1; do compass compile . ;done

This will compile all files every second. See the original issue here: http://drupal.org/node/1699852

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

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

Last updated 25th July, 2012 - 2:32pm