Skip to main content

The Cheeky Monkey Media Blog

A few words from the apes, monkeys, and various primates that make up the Cheeky Monkey Super Squad.

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 rumours 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 front end development, so I naturally cringed whenever I had to do something in 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:

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

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 extension 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:

  1. global.scss      
  2. [THEMENAME]-alpha-default.scss
  3. [THEMENAME]-alpha-default-narrow.scss 
  4. [THEMENAME]-alpha-default-normal.scss
  5. [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:

  1. http_path = "/"
  2. css_dir = "css"
  3. sass_dir = "scss"
  4. images_dir = "library/images"
  5. javascripts_dir = "library/js"

Last thing we need is to have 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 :)

Web Development

Would you like to know more about what we do?

View Our Services

Graphic Design Cheeky Monkey

Have a look at some our client work

View Our Work

Cheeky Monkey Discovery

Learn more about Cheeky Monkey Media

About Us

Comments