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
February 21, 2013 / Rick BjarnasonLike 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:
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 🙂