Web Development by Alistair Robinson

In a recent post I described my first foray into…well now, what am I supposed to call them? CSS frameworks? No, that doesn’t work, because Blueprint and YUI and 960 and others are often described as such. CSS meta-frameworks? That appeals to me, but it’s rather obscure. CSS compilers? Yes, perhaps.

But wait. There are CSS compilers, and then there are the libraries and frameworks and plugins that are built around them. Well, I guess that’s where the term “meta-framework” comes in.

One such meta-framework is Compass, which is built around the core language and compiler Sass. I mentioned Compass briefly in my other post. At the time, I had dismissed it as being more than I required, or more than I wanted to get into, but in the end I realized if I was going down this route at all I might as well do it right – and Compass does it right. It seems by far the most thorough, mature solution I’ve found, with a good heritage and a lot of success.

So that’s what I’ve settled on using now. There might be some kind of tighter integration achievable if you’re using Rails, but what I’m doing is using it to generate CSS as I locally develop a site in WordPress, and the same for a site built on the GetSimple CMS, and a Django project as well. You can use it with anything, and when you come to deploy it you can exclude all the Compass stuff, leaving no trace of it on the live site, except perhaps in the tell-tale auto-generated layout of the CSS code.

Your best bet is probably to go read the excellent documentation, but here’s some basic stuff from my own experiences…

Initial steps:

1. Install Ruby
2. Install Ruby Gems
(if you’re on a Mac you may have these already. I guess you could find out by carrying out the next step)

3. Install Compass from the command line:

With these installed, whenever I begin a project I set up Compass in the theme or template directory by running the following command inside that directory:

There are loads more options for the create command (See the documentation). Note also I’m using the SASS syntax, because I prefer it. There are two choices, and projects default to SCSS. See here for more information on the differences.

Incidentally, it’s interesting that SCSS is now the default syntax for Sass (confusingly, the name of the language/compiler is also the name of one of its two syntaxes). The SCSS syntax looks just like CSS itself, and the idea is to lessen the unfamiliarity for designers who are already very skilled in CSS. After all, there’s no reason in principle why they should have to learn a new syntax in order to take advantage of the power of Sass and Compass, which is independent of the syntax, and independently valuable.

However, I’m sticking with the SASS syntax, because I find it neater and easier to write, and I don’t mind admitting that it’s simply a welcome novelty.

That create command creates a configuration file, config.rb, and three directories, most important of which are src and stylesheets. src is the where you write the code, and stylesheets contains the generated CSS.

The last essential piece of the puzzle is how the CSS is generated when you’re developing. All you need to do is run the following command in the directory in which you set up Compass:

This runs in the background and watches for changes, then re-generates the CSS when it finds them.

Getting ready to code

I’m currently working with a config.rb that looks like this:

It’s good when starting out to use a _base.sass “partial” to set up your variables and imports. Mine looks like this:

See here for more on Compass best practices.

Mixins

Notice at the top of the base partial I’m importing another partial file, _my_mixins.sass. Mixins are wonderful: they let you collect together styles and mix them into your stylesheet wherever you like. Compass comes with many of them, but you can also define your own, which is what _my_mixins.sass is for:

These are used in the actual stylesheet source code (eg. in screen.sass) like this:

Grids

I’m also using the 960 grid system (Compass also comes with Blueprint). With Compass, using a grid system is very nice indeed.

One thing that’s good about this set-up is that you can code using a grid system without using any unsemantic class names like “prefix_2 grid_8.” Compass takes care of that when it generates the CSS. Effectively you’re using the grid as it really should be used, only in design and development. Compass calculates the relevant widths for your semantically-named elements, based on the 960 mixins, and there’s no underlying skeleton of unsemantic classes left behind in your HTML and CSS.

NOTE: Using +grid-container instead of +grid-system(12) means you don’t end up with all the 960 grid classes in your style sheet, which won’t be required because of your use of the mixins.

This is just the basics. There’s lots of stuff online, but you can’t do better than the Compass documentation, and it’s worth taking a look at the site of Chris Eppstein, the man we have to thank for it all.

Tags: compass, compilers, css, pre-processor, ruby, sass
Posted in web development | 4 Comments »