We do something similar, but vastly more evil, with Compass on our product. We need the visual experience to be solid on IE (our customer base is enterprise). So... we generate and cache PNG's with ImageMagick using hooks we wrote into Sass. For instance, we can specify arbitrary gradients using Sass color variables and direction/distance arguments, auto-gen rounded corners, and in some cases render text using non-browser-safe type.
I wouldn't recommend the approach (I think it's going to be incredibly clunky in a year or so, and that things like Fancy Buttons that use Compass to hide the complexity of optimal degrading CSS are the way to go), but it is an example of how flexible Compass and Sass are: you can abuse them terribly, and they'll stay loyal.
Fascinating, thanks for sharing your experience. Pixel perfection certainly is a tempting goal, but I've spent too much time and other people's money trying to preserve the illusion that IE is anything less than garbage. I've had enough. Now I'm more focused on usability and I find it far more rewarding.
Yeah, this is a point that many people neglect. It just needs to work in IE. It doesn't need to be pretty. And if you have enough customers on IE that it needs to be pretty, it doesn't need to match the real pretty exactly.
I think his point was simply that writing such CSS is hardly complicated. I like this abstraction and think it will be pretty handy for Compass users (of which I plan to become one), but this mixin basically reduces ~8 lines of CSS to two.
As far as amount of css goes, here's what you're dealing with to achieve something similar in only CSS.
1. Button reset - to get browsers to the same starting point
2. Rounded corners, Text shadows, and Gradients + vendoring
3. Background image fallback
4. Padding, Text size, line-height, etc
5. Default, Hover, and Active states for all styles
That's a lot of css to write, effectively reduced to a single mixin. Of course, it's also great that you can use the bare minimum html.
If I had been less snarky I might have communicated my question better, which is, what's the CSS pattern that's more complicated? It'd be a good candidate for a Compass plugin.
It should be noted that CSS gradients are not yet supported in Firefox (3.5). As such, this demo uses transparent PNGs instead of of CSS3 properties. It works fine in this case, but of course images aren't as flexible as CSS properties would be.
However, Firefox 3.6, which should be released within a few weeks, will support custom gradients, so things are looking up.
I wouldn't recommend the approach (I think it's going to be incredibly clunky in a year or so, and that things like Fancy Buttons that use Compass to hide the complexity of optimal degrading CSS are the way to go), but it is an example of how flexible Compass and Sass are: you can abuse them terribly, and they'll stay loyal.