Getting Started with Basic, SASS, and Compass on Drupal

Getting Started with Basic, SASS, and Compass on Drupal

With the integration of Basic, SASS, and Drupal, we'll be utilizing the Compass module to automatically compile our SASS markup to flat file CSS. Additionally, I will supply you with a basic profile and make file which will allow you to build this environment on your local machine. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of CSS. Using the power of Sass Mixins and the Compass community, you can apply battle-tested styles from frameworks like Blueprint to your stylesheets instead of your markup. Out of the box, Basic has support for both SASS and Compass. The Compass module supplies us with menu callback functions which enables us to compile our markup on demand or on page reload - though it's advised to disable this feature when pushing your environment to production due to it heavy reliance on the theme registry being rebuilt.

What You'll Need

Alternatively, you can checkout an example install profile from my github repository. git clone To use this install profile in a drush make file, create a file named and paste in the following code:

; The Jibe Multimedia, Inc. - Basic/Compass Install Profile api = 2 core = 6.x projects[] = drupal projects[basic_compass][type] = "profile" projects[basic_compass][download][type] = "git" projects[basic_compass][download][url] = ""

To execute the build, run: drush make If you're looking for step by step instructions on a how to install Compass or SASS/HAML on your machine, I've outlined some reference material in another blog post on a talk I did at the Pacific Northwest Drupal Summit here in Vancouver.