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.
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:
Let's add Compass
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"
Last thing we need is to have compass watch for changes. You can do this through the command line like this
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 :)