Getting Started with Sass and Compass in Drupal

Error message

The spam filter installed on this site is currently unavailable. Per site policy, we are unable to accept new submissions until that problem is resolved. Please try resubmitting the form in a couple of minutes.

Looking to write CSS for your Drupal sites faster and easier, and eliminate common defects? The first step probably involves choosing a CSS preprocessor to make your stylesheets programmable and accelerate the production of code. There are several out there which are widely supported, but the ones we really like to use are SASS and Compass. This article explains how to set up these tools for use within Drupal.

SASS is a CSS preprocessor. With it, you can write programmable stylesheets - meaning that variables, nested code, mixins, and inheritance all become part of how they are written. These stylesheets then compile into traditional CSS, saving time and effort by keeping the code small and the generated output compatible with all major browsers.

Compass adds another layer of efficiency to the process by providing support for vendor-specific markup and common design patterns. Instead of having to remember to prefix border-radius properties with all the current vendor-specific mixins, you can write a single line of code that will compile with support for them automatically built in.

Together, these technologies work to reduce the complexity of your themes. Instead of creating style rules that apply to individual page elements, you can create rules that are inherited by multiple styles and used throughout your CSS code. You can specify variables that are used throughout your theme (for instance, colors) and know that they are being used correctly every time they are applied. This eliminates some of the more common deficiencies with themes and improves your ability to support your theme over time.

Several popular Drupal themes support SASS and Compass natively (most notably, Zen) while others can have support added without too much effort. It's easy to get started using them, and here's a guide for how to get going:

Install SASS

SASS and Compass are widely supported on all major operating systems. You can work with them using one of the major applications for compiling SASS files. These applications are great for designers who have no interest in the command line and are looking to get started right away.

For people who want to use the command line, however, the first step in setting up SASS is installing Ruby.

What what what? Ruby is not Drupal! Well, websites built in Ruby are certainly not Drupal, but Ruby is a lot more than a framework for developing web applications. SASS was originally written in Ruby and uses it to watch for and compile changes to style sheets.

Linux

If you are using Linux, start by installing Ruby via apt, rbenv, or rvm. Depending on your distro, it may already be installed.

OSX

If you are using a Mac, Ruby comes pre-installed. You may still want to download RVM, however, to allow you to switch between different versions of Ruby.

Windows

If you are using Windows, the best way to get started is using the Ruby installer. It will set up Ruby on your machine so that it can be executed on a command line.

Installing SASS

Once Ruby is installed, installing SASS is easy. From your command line, enter the following:

gem install sass

This will install SASS on your machine. If you run into errors, it probably means you need to run this command with sudo.

Install Compass

With Ruby and SASS installed, it's much easier to install Compass. Enter the following in your command line to set up your system to use Compass.

gem update --system
gem install compass

Create a Project (Optional)

If your theme is already configured to use SASS, you will find a file called config.rb. If that's there, great, you are ready to get started working with SASS and Compass right away.

If not, you will need to create a new project. Creating a project means you are creating a set of files SASS will use to compile your stylesheets. You can create a new project using any one of the apps mentioned, or by running the following through the command line:

compass create [project-name]

Just replace [project-name] with the name of your project, and Compass will create the following files and directories.

  • config.rb - which houses the settings used when Compass compiles your stylesheets
  • sass/ - which houses the SASS files that will be used to create stylesheets
  • stylesheets/ - which houses the stylesheets that will be generated by SASS

A few things to keep in mind:

  1. Drupal themes commonly use a css/ directory to house stylesheets. If this is important to you, you can specify the directory where stylesheets will generate by adding --css-dir "css" to the command above.
  2. In the sass subdirectory, several files will be created: screen.scss, print.scss and ie.scss. You can use these to write your SASS code, but you don't have to. Any files you add to the sass directory will be automatically compiled for you.

Watch Your Project for Changes

Once you have SASS and Compass set up and have created a new project, the next step is to tell Compass to watch for changes. Every time a file changes in your theme's SASS directory, Compass will compile a new version of the stylesheet. To tell Compass to watch for changes, you can enter the following on the command line.

compass watch [path-to-project]

If you watch your command line, it will provide an ongoing list of files that have been compiled and errors that may appear.

And that's it. You are now ready to get started with SASS and Compass. Happy styling!