Stick it up your SASS

If you’ve ever done any web development work in Ruby at all, odds are pretty good that you’ve encountered some pimply European kid on an amateur gravity well like StackOverflow or IRC who called you an idiot for not using HAML and SASS for all of your front-end needs. DRY, dude!

You then probably visited the HAML/SASS site, looked over all their evangelism, and decided that maybe you actually were an idiot for not using this amazing new technology. It is amazing, right?

Unfortunately, no. What SASS is, is a day-glo crash helmet with matching elbow pads for special needs children who’ve peered into the shallow pool of CSS syntax and said I’m too scared to go near that, when’s my mommy picking me up? While some of what it offers in the way of variables and mixins are welcome additions, SASS as a whole is simply not up to the task of replacing CSS for people who actually know and use CSS.

No, CSS is not perfect, but it works and there are plenty of tools out there to help you debug it right there in your browser. SASS is even less perfect, and it really just gets in the way unless you write nothing but braindead disco rap that is too simple to warrant an extra layer of abstraction in the first place.

Disagree? Let’s translate this into SASS:

You’ll notice that I had to type article section > a lot, and that’s the god-awful tedium that SASS wants to save me from, so I fed it all to the bundled css2sass tool:

I’m going to assume that you’re smart enough to figure out what those extra ampersands mean without a SASS grammar tutorial; the repetition is gone, and it’s seven lines shorter, but is this translation easier to read? Easier to maintain? More straightforward? If you could only see a chunk of this code in a window because the the top of the nest had scrolled out of sight, would you have any idea what you were looking at? If you decided that you wanted to borrow just one of those selectors for a completely unrelated project—like say dl dt[prefix]:before—would you be able to copy and paste it out of there in one operation? If you suddenly needed to use a sibling combinator on just one of those selectors, would you be able to change its > to a ~ without screwing half a dozen other things up? Is someone else’s strictly imposed order synonymous with ease of organization?

If the answer to all of these questions was no and it was, then you probably shouldn’t be making light of anyone who chooses not to use some fly-by-night whitespace DSL that does nothing but wrap its own smugness around another slightly stodgy but infinitely more established DSL that already refactors perfectly well on its own.

SASS’ ultimately pointless redistribution of space is what Compass author and SASS core contributor Chris Eppstein—a man who likens CSS to assembly language with a straight face—calls clarity of intent i.e. the same goddamned thing, minus the braces. He claims that SASS and Compass have reduced his front end development times by 40%, but doesn’t really back that number up with much more than a screenshot of caring.com’s code that could have had its readability improved just as easily by any text editor that supported folding.

While your initial switcher experience can certainly make it seem as though you are saving yourself a lot of keystrokes on that really small reset stylesheet full of short, redundant selectors and cheap IE hacks, just wait until you build up a library of thousands of very specific rules and are forced to pinpoint the cause of a 2 pixel gap in the resultant mess of code whose line numbers no longer correspond to anything your browser’s inspector is ever going to show you. It may take you a few months to realize it, but you’ve basically taken the most important part of CSS, the cascade, and thrown it out the window in favor of some half-baked nesting convention that hasn’t seen anywhere near as much road testing just because someone told you it was cool. Are those named variables and mixins you could have created yourself in Erb worth the extra work? Is giving every element an ID rather than another class making your grid layout progress more rapidly? Are function-generated tints and shades really an acceptable substitute for informed, conscious design choices?

If you’re a tubby tech blogger who shaves yaks more frequently than your own neck, have no color theory training whatsoever, and honestly believe that GIMP is the only design tool anyone should ever need, then yeah, you’re probably pretty damn pleased with the results. If you’re not, then please consider the source of the advice you’re being beaten over the head with before taking any of those StackOverflow insults seriously. You could very well be an idiot for a wide variety of reasons, but not using SASS isn’t likely to be one of them.

When you get right down to it, SASS is basically the whole Rails migrations nightmare all over again—somebody thought they’d look really clever if they whipped up something to protect all their fellow retarded Rubyists from the evil semicolon and Satanic curly brace with a friendly abstraction layer, reducing all the common cases into a very slightly terser common language. Problem is, when your happy friend language only provides access to features that are common, you end up making the less common features flat out impossible for anyone who got sucked into your short-sighted pipe dream. At that point you generally get a lot of people pointing out your language’s shortcomings on your public bug trackers and you essentially have two options if you want to keep it going:

Rationalize your myopia the 37 Signals™ way

Ignore the real world. Draw a line in the sand. Let your customers outgrow you. Grow a fauxhawk and move to Europe. These are all anthemic axioms which most Rails fans will have already trained themselves to swallow without gagging, as they came right out of their heroes’ mouths. Everybody knows that if you want to be as cool as DHH then your rockstar response to every feature request should be something along the lines of I don’t need to do that, so neither should you.

Fair enough—anyone who’s ever tried to load this page in IE will tell you that I myself adopt a similar attitude when it comes to considering the needs and wants of Windows users—but your entire argument for the superiority of your wrapper language just evaporated while you were trying to get your head further up your own single gear bike-riding ass.

Escape defeat with escape sequences

After enough public mockery, or a little firsthand experience—whichever comes first—you may start to realize that your language really isn’t good enough, and decide that you need to give people the option of writing in the original, which you originally thought you were going to be able to replace without taking a single compilers class.

Now your language either looks so much like the thing it’s trying to replace that the two are virtually indistinguishable, or users have the option of typing in some backticks or calling a special escape function that allows them to inject some native code into your cross-compiled bullshit.

Also fair enough, but why should anyone bother with all those dependencies and intermediary steps at all when they just have to escape to native code all the time to get any real work done? Oh, right... Because semicolons are just like assembly language and significant whitespace is like so meta-elegant. DRY!

From what I’ve read of the various groups and message boards dedicated to the project, SASS has taken both of these paths, just as migrations did before them. After an appropriately arrogant period of dismissing the so-called edge cases who dared to exercise CSS features the authors couldn’t imagine a use for, current and future versions of SASS all seem to be advertising a move to a decidedly more CSS-like syntax. More CSS-like alternatives like LESS have already proven that this too is folly, but lord knows there’s no stopping them from trying when open source street cred’s on the line.

CSS is flawed; no arguments there. But regardless of what language you think you need to turn into Ruby this week, ask yourself one question: Will this additional layer of abstraction reduce the amount of non-contrived code a fluent practitioner will have to write by more than half on a consistent basis? If it will, then you might just have a really great idea. If it won’t then you’re probably just wasting everyone’s time because you want to be famous, and shouldn’t really bother developing that messianic viral marketing complex for a few more years.

And just to be absolutely crystal clear on this point, this is just a big personal marketing campaign we’re talking about here. In Chris Eppstein’s own words:

If an article on CSS or especially CSS frameworks showed up on reddit, digg or ycombinator news, I found a way to link to my project in there. I left comments on relevant blog posts. I eavesdropped on twitter for people talking about blueprint and css, and pointed them toward compass. Week by week, compass grew. Compass-style.org got "stumble-upon"-ed. A small but fervent community of early adopters saw what compass and sass could do for web development, and they latched on to it. They blogged about it, and they tweeted. Oh my did they ever tweet. It's just so damn easy to send out a link to a new and exciting technology and thanks to the large number of ruby developers on twitter who are always eager to try new things, compass spread quickly.

That’s right. The belligerent tween who sold you that line about how much your productivity would skyrocket by using SASS was probably just regurgitating something that was tweeted at him by a stammering man who wanted attention. Praise from Caesar! If you accept those people’s credibility on that basis, then you have to accept everyone’s. No exceptions.

Don’t get me wrong—if SASS meets all of your needs, that’s super; you keep right on truckin’ there, Broseph. Just don’t tell anyone else they’re an idiot when it doesn’t meet any of theirs, and don’t whine about how CSS has failed you as a professional who engineers websites when your website looks like somebody took a screenshot of an Excel worksheet and pasted some clip art into it. Anyone whose front end is visibly overflowing with as much mediocrity as your average SASS bully’s is would probably benefit from having it develop at least 40% slower. Yeah, Chunkstyle over there knows what I’m talkin’ about. It’s called a salad, kids.

For extra credit, feed this to the SASS simplification machine and see what kind of highly-maintainable ultra-semantic perfection it craps out the other end:

Pure awesome, right? First big whoa you’ve had since you read Zeldman’s book, right? It’ll all be better in SASS 3, right? Right!