Adding some SASS to Drupal’s Omega sub-theme

Like many Drupal development shops, we have fully embraced the excellent Omega theme. As a responsive base theme, it helps us efficiently turn out great Drupal sites.

The only thing that it is missing is built-in support for Compass and SASS. I have been hearing rumors that the next version of Omega(4) will be adding this in, but in the meantime, I am going to show you how to add them in about 5 minutes of time.

Get comfortable in the Terminal

My background is in front-end development, so I naturally cringed whenever I had to do something on the Command line. But, I quickly learned that if I wanted to be efficient then I had to put those worries to bed. And if you are a Drupal developer and you are not using Drush… stop now and go learn it.

Setting up your environment

Before moving forward you really should be using the most efficient development environment you can. Gabe Carleton-Barnes over at ThinkShout has already created an excellent tutorial on this. If you have time, definitely check it out.

For this to work you are going to need to have a few things installed.

• A configured Drupal 7 site
• Drush installed locally
• Compass installed locally

If you don’t know how to do this, go back and read Gabe’s article.

You also need a couple of Omega-specific things:

• Omega
• Omega Tools

Luckily, once you have Drush installed these are only a couple of easy commands in the terminal. First, navigate to your site’s root and then run this

drush dl omega omega_tools

Then enable both

drush en omega omega_tools

The step by step

The first thing you need to do is create your sub-theme

drush omega-subtheme "sub_theme_name"

Drush will create a new directory in your themes folder. You will need to cd to that.

 cd sub_theme_name

Now we need to add a new directory for our SASS files.

cp -R css scss

Now we need to change all the extensions in the scss folder to be .scss and not .css. I usually perform this manually because I have not found a simple way to do it in the command line.
You should end up with file names like this:

global.scss      
[THEMENAME]-alpha-default.scss
[THEMENAME]-alpha-default-narrow.scss 
[THEMENAME]-alpha-default-normal.scss
[THEMENAME]-alpha-default-wide.scss

Let’s add Compass

compass init

We won’t be needing all the Compass directories though. We can remove the “stylesheets” and the “sass” directories.

rm -rf stylesheets sass

I like to create a library folder to hold all my site’s assets

mkdir library library/js library/images

Edit config.rb so it looks like this:

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "library/images"
javascripts_dir = "library/js"

The last thing we need is to have a compass watch for changes. You can do this through the command line like this

compass watch

But, a handy tool I use is CodeKit. It will compile your Compass or SASS file and so much more. Definitely, a huge time saver.

There you have it a fully working Omega sub-theme with the power of Compass and Sass baked in. Now get creating 🙂