Using Compass in your Drupal project

Back in the day I used to roll with good old CSS and it did the job. Mostly because it didn't need any special maintaining and the code was simple.

Things changed when I first started working on some more beefy projects. Changing of various stuff followed by constant modifying of css was truly a pain in the ass, you ask why? Simply because there was so much css that maintaining caused severe pain in my head.

I'm sure a lot of people would agree that CSS can easily become a mess, no matter how careful you are.. Although Compass won't solve this problem completely, it will make your work more comfortable.

This article should serve as an informative post to all you guys writing regular CSS to consider using a preprocessor.

What is Compass?

A quote from the official website "Compass is an open-source CSS Authoring Framework" which pretty much sums it up.

Think of it as a CSS with extras or just CSS having Tom Selleck's moustache.. Wait what ?

American actor Thomas William "Tom" Selleck

Why Compass?

I'm not the programming type of guy, so I was kinda afraid at first(you know, command line and stuff).

But it's surprisingly easy to use. Installation is very straightforward and there's plenty of documentation available on the Compass website.

I've been doodling with it for some time and found it to be very clever and fun! I mean.. using nesting, variables, various helpers and mixins?

Syntax

You have two syntaxes, SASS or SCSS.. You can also combine both in the same project, but not in the same file(You don't put Sass into SCSS files.. and vice versa)

SCSS is basically enhanced CSS where you can use all the goodness Compass offers(keeping the syntax same).

I prefer Sass because it's cleaner and more interesting though semi-colons and curly braces are invalid. Since it's based on indentation(white-space sensitive or simply 'tabbing') you can make nice readable sections of CSS.

Example

SCSS:

#foo {
  border: {
    style: solid;
    color: #fdfdfd;
  }

  .content,
  .main-content {
    background-color: #ccd;
  }

  .content {
    border: {
      style: dotted;
      color: #fdfdfd;
    }
  }
}

Sass:

#foo
  border-style: solid
  border-color: #fdfdfd
  
  .content,
  .main-content
    background-color: #ccd
    
  .content
    border-style: dotted
    border-color: #fdfdfd

CSS:

/* line 3, ../sass/screen.sass */
#foo {
  border-style: solid;
  border-color: #fdfdfd;
}
/* line 7, ../sass/screen.sass */
#foo .content,
#foo .main-content {
  background-color: #ccccdd;
}
/* line 11, ../sass/screen.sass */
#foo .content {
  border-style: dotted;
  border-color: #fdfdfd;
}

Installation

To get this working on Windows, install ruby installer first.

Next open command line and enter:

  gem install compass

OS X or Linux:

  sudo gem install compass

Try it out!

Create a new project

  c:\>compass create my_project -x sass

This -x sass part means we're preferring sass.. Of course you can just leave it empty if you don't want to use Sass syntax.

  c:\>compass create my_project

That way we would use the default SCSS.

Compass watch

You can make Compass check your project for any changes and it will automatically compile them to a flat css that can be used anywhere.

Navigate to your project directory and type compass watch.

  c:\my_project>compass watch

  >>> Compass is polling for changes. Press Ctrl-C to Stop.

That's cool, but how do I use it in Drupal?

As I mentioned above, Compass produces a flat css file that can be used anywhere, and that's what we need.

Putting config.rb in the root of your theme folder is all you need to get it running.

I like to keep the folder structure the same as Compass produces, but that's really just a personal preference.

Any modules?

You can use Compass stylesheet tool module, but you'll need PHP and ruby on your server.

With this module you can compile CSS using devel or cron.

I believe there is more than just this one, but I had no need to try them out since it's just so simple to get it running.

I guess we're done here

We just scratched the surface here, there is so much more to learn.

Still not entertained?. Then you will want to read more about SASS and Compass. It probably won't make you a better coder, but will definitely save you some hair.