found drama

This evening I deployed version 0.5 of my “Orin” theme for this blog. The main motivator for version 0.5, and thus the bulk of the changes, was to switch from a “pure Sass” project, to a Compass-based project. For some reason, I expected this to be a big effort.

But boy was I wrong.

First, a moment to clarify: In case you have not been paying attention, I have been a Sass convert for over a year now. I use it at work. I use it here for the founddrama.net theme development. I sing its praises. I chime in with tips for folks whenever I can. I gave a presentation on it at VT Code Camp this year. I converted at least one person to the cause.

But somewhere along the line I had gotten it into my head that if you bought into Compass, you bought into a grid system and a ton of other stuff that I neither needed nor wanted. This was nothing short of a prejudice, and I admit it. I even watched Chris Eppstein’s talk during this year’s online CSS Summit. Thus: I should have known better.

But curiosity got the better of me. ¹

It took me about 10 minutes to figure out how to “convert” the project; and another 50 minutes to actually make the changes. Allow me to summarize:

Step 1: Install the gem and initialize the project. As follows:

…and I probably could have skipped the --force flag.

There was no magic here. No gotchas or conflicts. Compass is just a great framework… like “Sass-plus”. If Sass makes writing CSS a saner exercise ² then Compass takes the hair-pulling tediousness out of the CSS3 vendor-prefixed trickery. ³

Now… I could easily have stopped there. And been done in 10 minutes. There was no need to go and replace all of my mixins with theirs. But their mixins are better documented. And have more robust cross-browser support. ⁴

Step 2: Swap out my mixins for theirs. As I mentioned, I didn’t need to do this. But it made sense. So I quickly ripped through my Sass source and figured out which of my mixins I could pull. Which was all but two or three of them. It was liberating to dump these.

Had I done some hard work to make them? Yes. Was I more confident in the Compass mixins? Almost uniformly true:

• There were several places where I dropped my home-rolled mixin all together in favor of the Compass mixin (e.g., dropping my rotator for their rotate).
• In others, I kept mine, but I kept it as a wrapper (e.g., my basic-linear-grader wraps the background mixin and the linear-gradient function, but adds a sensible “for older browsers” default in the output).

None of them were left completely alone. But (again) I was able to rip through all of these in just a few minutes.

Step 3: Hook into the event listeners/callbacks. For most Compass projects, this is probably overkill but… WordPress requires the style.css file to be in the theme’s root; Compass wanted to compile src/scss/style.scss to css/style.css. I probably could have configured it to compile to the theme’s root directory but… that’s not what I wanted, not with an ie.css file floating around out there. So… (I wondered) how can I get Compass to move/copy that file for me? The answer was a simple event listener/call back dropped into the config.rb file:

…and that was pretty much it. ⁵

Step 4: Bask in the glory. Actually, Step 4 was more like: I don’t believe it was that easy, so why don’t I creep and crawl all over this thing with a fine-toothed razor comb in every browser I can think of to see if I completely missed something. And it turns out that pretty much everything came out looking great. Better than expected. See those CSS3 transitions in Firefox? Boom. I got those for free.

So was it all honey and roses and whoopie pies? Not quite. It was criminally easy to switch over. And the documentation is great. And the community built around Compass/Sass is even better. But I did run into a couple quirks:

1. The transition mixin seems a bit dodgy. I had trouble with figuring out the syntax rules here ⁶ and a couple times ran into situations where the mixin would seem to work fine with all, and then not work if I tried to tell it to only apply to certain properties. My best guess is a I ran into bug #289.
2. The background mixins built into the (admittedly “in beta”) images module gave me just a bit of static. What I ran into here was two fold: (1) when I gave a straight-up color value as the first param to the background mixin and followed it by the linear-gradient function, I expected it to output that color as the background color before outputting the code for the gradients (this did not happen); and then (2) while the mixins themselves seem pretty well documented, they reference a bunch of gradient “functions” which I could not find. The only documentation around gradients that I could find was for the deprecated gradient module which pointed me to the “in beta” images module… So yeah: I got it working, but this was most of the time I spent “converting”. ⁷

Only two “problem areas”? (you ask)

Yes, only two. And both of these are probably pretty far out in the weeds. So, like I said: criminally easy.

So: my hat is off to Chris Eppstein and the rest of the Compass crew ⁸ for producing this fine piece of software. So if you’re a reluctant composer of CSS (like I am) — then I urge you to try Compass and Sass. And if you’ve already picked up Sass, then I urge you (doubly so!) to dive into Compass.

Finally: Compass is Charityware! If you enjoy it, please consider donating to UMDF — this link will allow you to donate on behalf of the Compass project.

1. There’s no long story there. Just kept hearing the project’s name dropped over and over again.[↩]
2. And it does.[↩]
3. And/or also things like typographic vertical rhythm stuff etc. But I haven’t gone that deep yet.[↩]
4. In other words: Eppstein et al. have done all the hard work already.[↩]
5. Please try to appreciate that I’m just a dabbler in Ruby. So to pull that off in roughly 10-15 minutes was a startling revelation.[↩]
6. Par for the course?[↩]
7. This could have been: “How to convert from ‘Pure Sass’ to Compass in 30 minutes” otherwise?[↩]
8. Especially @jetviper21; those callbacks are great.[↩]

About Rob Friesel

One Response to a Compass convert