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.1
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
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 exercise2 then Compass takes the hair-pulling tediousness out of the CSS3 vendor-prefixed trickery.3
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.4
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
- In others, I kept mine, but I kept it as a wrapper (e.g., my
backgroundmixin and the
linear-gradientfunction, 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
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
…and that was pretty much it.5
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:
transitionmixin seems a bit dodgy. I had trouble with figuring out the syntax rules here6 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.
backgroundmixins built into the (admittedly “in beta”)
imagesmodule 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
backgroundmixin and followed it by the
linear-gradientfunction, 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
gradientmodule which pointed me to the “in beta”
imagesmodule… So yeah: I got it working, but this was most of the time I spent “converting”.7
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 crew8 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.
- There’s no long story there. Just kept hearing the project’s name dropped over and over again. [↩]
- And it does. [↩]
- And/or also things like typographic vertical rhythm stuff etc. But I haven’t gone that deep yet. [↩]
- In other words: Eppstein et al. have done all the hard work already. [↩]
- 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. [↩]
- Par for the course? [↩]
- This could have been: “How to convert from ‘Pure Sass’ to Compass in 30 minutes” otherwise? [↩]
- Especially @jetviper21; those callbacks are great. [↩]