Using Compass and Sass for Drupal Projects

The route I traveled to become a Sass evangelist was long and harrowing. Less harrowing than long, though. I’d been hearing talk for a while about this new syntax for writing CSS, and it wasn’t something I was terribly interested in until Drupal Camp Colorado; I saw Mason Wendell give a talk on designing in browser, and how much easier it becomes if one uses a syntax like Sass.

I left Mason Wendell’s talk full of enthusiasm, with visions of Sass supremacy in all of my projects. Yet, one thing eluded me still. Step one. How to install and use Sass. More specifically, how I was going to use Sass in Drupal projects.

I’ll assume that you don’t need to be convinced that Sass is the shit. Instead , I’m going to show you how to install the appropriate packages in order to use Sass, and how to begin using them in your Drupal projects.

Creating a Ruby environment with rbenv

As Sass is a Ruby gem, you’ll need to create a decent Ruby environment to work with it. I’ll forever advocate circumnavigating the defaults that come with OS X, instead opting to install anything I can with a package manager like Homebrew. So, we’re going to use brew to install a Ruby manager called rbenv and its sister utility, ruby-build.

  $ brew install rbenv $ brew install ruby-build

If the above does not go seamlessly, you can use the brew doctor utilty to understand why. Next, add the following to a shell profile, be it .zshrc or .bash_profile:

  eval "$(rbenv init -)"

Now let’s re-source our profile:

  $ source .zshrc

Finally, we need to install a version of Ruby that we plan to use globally.

  $ rbenv install 1.9.3-p194 $ rbenv global 1.9.3-p194

That’s about it. We’ve got a Ruby environment!

Installing Compass and Sass

Sass is an excellent syntax, but Compass is a utility that makes it so much more. A trite analogy: Sass is a nail, Compass is a hammer. Sass is the syntax, and Compass is the compiler.

Compass provides one with dozens of predefined mixins, helper classes, and shortcuts for generating vendor prefixes. It’s also the means by which one converts a .sass or .scss file into regs-ass CSS. Installing Compass installs Sass, so might as well.

  $ gem install compass

Pull it all together, and build a Drupal theme

Now that we have the tools, we need to apply them to Drupal. Easily done. I’ll assume that you’re familiar with creating themes for Drupal.

There is a Compass tool specifically tailored to Drupal, aptly named Compass Stylesheet Tool. We could use this, but I find it is a far better workflow to work with Sass the way it was intended, as a syntax that is compiled locally, instead of by a utility on a server. One of the primary advantages to this approach is the abscence of worrying about keeping a remote version of Compass up to date.

I like to create my themes using Tao as a parent theme, as it cleans up a few annoyances that are inherent to Drupal. It gives me a super vanilla template, with a few theme overrides and good examples of how to create my own.

Build a sub-theme of Tao. If you’re not sure how, a guide exists at drupal.org. Once we have a sub-theme, open up a terminal, and navigate to it:

  $ cd /to/the/location/of/your/sub-theme $ compass create

Running the compass create command generates a few base files and directories; If this isn’t what you want, you can easily omit everything using alternate commands found here. I like these defaults, which include:

• config.rb - this is where we can adjust the project’s compass settings
• stylesheets/ - CSS that will actually be used by the site
• sass/ - where we write styles that are compiled to CSS
• A few .sass files in sass/ - delete them, or review them, as they might be relevant to your project

Be sure to add the Compass generated .css files to my_theme.info, as this is the only bit that a web browser cares about. Now we can theme away using Sass to write styles, and Compass to compile them to css. To compile to CSS:

  $ cd /to/the/location/of/your/sub-theme 
  $ compass compile 
  # Or, if you’d like Compass to generate CSS on the fly 
  $ compass watch