Using SASS For Your Next Drupal Project

As technology advances old methods are replaced or refined with newer and more practical means. Today, we have SASS to power our CSS files. If you've been using CSS for some time, you can agree that the syntax portion can easily become a mess; regardless of how careful and well organized you are. SASS may not solve this problem directly, but it does make our stylesheets manageable and practical.

What is SASS?

SASS is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more to generate well formatted CSS using the command line tool. The benefit of using Sass is that it makes your stylesheets easier to organize and maintain.

Installing SASS

Before we begin Sass runs on Ruby. If Ruby is not installed on your system we need to install that first by using the command rubygems

sudo apt-get install rubygems

RubyGems provides the ability to manage concurrent versions of libraries and dependencies. This command will also install the latest version of Ruby onto your system. Now that Ruby is installed we can now use our new command gem to install compass. Running the code below will install compass and sass onto our system.

sudo gem install compass

Compass is a helper library for Sass which includes libraries of shared mixins, a package manager to add additional extension libraries, and an executable that will convert Sass files into CSS automatically.

Developing with SASS

First we need to create our new stylesheet folder and sass folder. Within our Drupal theme directory use the following command:

compass create

Within our Drupal theme directory you will now have two new folders: Stylesheets and SASS. You will also notice a new file called config.rb. The config.rb file holds all the information related to our .scss files and the equivalent CSS files.

Now that we have SASS and Compass installed and the necessary files created. To automatically generate the CSS versions of the scss files that we will be working with from here on out; we need to tell Compass to "watch" the sass directory so that any time a .scss file is changed it will automatically place an updated CSS file into our theme directory.

compass watch <path to your theme directory>

If you are already in your themes directory than simply type this in your command line:

compass watch

Drupal Related Themes

If you are looking for an out of the box solutions that come with Sass the Basic theme is a great option as well as Zen Grids. Zen 5 includes Zen Grids automatically, so there’s no need to install it separately but you can also install Zen Grids in similar fashion by using the gem command.

sudo gem install zen-grids

Further Reading

After you have completed the steps above you should SASS and Compass installed and running. Now you're ready to dive into the programing world of Sass with the following links:

SASS Tutorial

SASS Reference Guide

SASS Text Editor Plugins

Compass - Library of SCSS functions and patterns