Getting Started with Basic, SASS, and Compass on Drupal
January 10, 2011 - Steve Krueger
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 Needmy github repository.
git clone firstname.lastname@example.org:stevekrueger/basic_compass_profile.gitTo use this install profile in a drush make file, create a file named
basic_compass.buildand 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] = "email@example.com:stevekrueger/basic_compass_profile.git"To execute the build, run:
drush make basic_compass.buildIf 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.