Setup Sass on Drupal
Christos Vlachodimitrakos's picture

CSS Preprocessing on Drupal

Setup Sass on Drupal
08.01.14

As you may already know, Drupal on it’s own is one of the most modular open source CMS/Framework you can use, to build a website.

Unfortunately, when it comes to styling your website, stylesheets are not such modular.
To be honest, CSS is not even close to modularity or abstraction.
CSS is just a bunch of declarations on a document file with .css extension.
On the other hand, if you want to have a cross-browser website, apart from some skills for most of your projects, you need plenty of time, which I am sure you don’t have. Don't get me wrong, as a front end developer I love CSS and the way it works.

But, there is Sass as well. And yes, I adore Sass!

There are many reasons why you should preprocess your CSS.
First of all, you can use variables, mixins, nesting rules, add functionality with Sass functions and so many more goodies, which can make your life easier as a front end developer.
All these goodies, gives your CSS the two superpowers that is lacking of: Modularity and Efficiency.

In the end, the benefits from using a CSS preprocessor are limitless, but for me those two reasons already provide a hell of a start.

If you already don't know the basics about Sass and Compass, I provided you with some links at the end of this post to learn more. The rest of you, follow me.

To install Sass and Compass, open a terminal and type:

gem install sass
gem install compass

Sass and Compass are ready to being used for any kind of project you want.
That simple!

Setup Drupal and Sass

I assume you have a Drupal site ready for theming, and you have drush installed as well.

The easiest and most straightforward way to have a base theme to work with, is by employing the Omega 4 theme for Drupal. You can download it from here.

You also need to install Guard that is a command line tool to easily handle events on file system modifications boosting your front end productivity. Guard can be installed by typing

gem install guard

Next, we want our actual theme. The Omega 4 theme we downloaded earlier, is not supposed to be used as a standalone theme. It’s more like a framework, so we need a child theme to work with. A child theme can be created by

drush omega-wizard

Omega wizard will ask some simple questions, in which the most important one is which starterkit should be used as ours and if we want to download some third-party libraries.
We do want them both!

Now your theme folder structure should look like this. (Pretty organized I’d say.)

Next stop, LiveReload

First of all, you need the browser extension.

I personally prefer Google Chrome for development, but you should find the extension for Firefox or Safari as well.
Once you download the extension, you have to enable the LiveReload feature within your theme’s settings.

Navigate to “Appearance/Settings/yourtheme/Development” and check the “Enable LiveReload” as shown below.

Ready!

If you have made it so far, you have successfully completed your Drupal project to work with Sass. Pretty easy, huh?

Now don't forget to run

drush omega-guard [name-of-your-sub-theme]

every time you work on your project.

This command will start a daemon that will monitor for file changes every time you hit save.
You should also enable the LiveReload extension (when you do that, the daemon will notify you that LiveReload client is connected), so you will be able to see the changes on your browser on-the-fly, without having you to refresh the page each time you make a change.
It’s pretty convenient and awesome, trust me!

Plugins

This setup requires some additional Compass plugins such as “compass-normalize”, “rgbapng” and some others. You can either install them (and use them) or comment out the lines that calls them in the config.rb file.
One of those plugins is the “sass-globbing” plugin too.
Even if it seems convenient at first, it may be frustrating as the project grows, so I don't recommend using it.

Keep in mind, that if you decide to deactivate it, you should check all your “@import” statements in your Scss files, to point to one file at a time instead of the whole folder!
It might seem a bit time consuming to import one file at a time (and it is), but you have better control over your Scss files and folders. At least this is my experience with the Sass-globbing plugin.

CSS Modernized

If you are looking a way to modernize your workflow and write faster and more flexible CSS, this is the way to go!
Follow SMACCS style guide, keep your files/folders organized, reuse your code and get your stylesheets to the next level.
Once you get used to write CSS that way, you'll never go back!

Further reading

Sass: http://sass-lang.com/
Compass: http://compass-style.org/
Omega 4: https://drupal.org/project/omega
SMACCS: http://smacss.com/