Shomeya

Two web artists. One amazing company.

Getting started with Compass and Drupal

from Michael Prasuhn on January 9, 2011 04:00pm

Here at Shomeya we have been making some changes to our design process, and Sarah has started to write about the creative process but I thought I would cover some of the technical challenges. We decided to use SASS and Compass to develop the visual look and feel of our site (I'll leave the 'why' for another article) and needed to find a way to make Compass play nice with Drupal. While there is a Compass module for Drupal, we did not use that for this project since it was not ported to Drupal 7 at the time we started, and we wanted to use the convenient compass watch command to automatically rebuild our stylesheets. We did this by moving the config file from a normal compass project to the root of our Drupal site, and configuring it with the full path of our theme folder in our config.rb:

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "sites/all/themes/shomeya_theme/css"
sass_dir = "sites/all/themes/shomeya_theme/src"
images_dir = "sites/all/themes/shomeya_theme/css/images"
javascripts_dir = "sites/all/themes/shomeya_theme/javascripts"
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
preferred_syntax = :sass

I think using this technique has several benefits, such as providing a clean consistent place to run compass watch and should we decide to use full URLS, as some mixins do, the path will be correct, referencing the root directory of our site. Then when we are ready to deploy changes we can run compass compile --force -e production -s compressed add the files into git, commit and we're ready to push changes.

blog comments powered by Disqus