Pain in the sass

SASS is fun to many – I too love the mixins. But for the majority of time I hate it.

SASS is a family of retarded inbreds

SASS with Compass: often times I’ve felt this largely marketed magic potion is just hype. It’s is akin to snake oil, the panacea of all front-end-css problems. For me, it’s pain in ass. I have seen sass features being abused more often.

Let me give you reasons why not use SASS

People use nesting a lot

Not sure if I worked with stupid people, or it’s just the norm, but when you nest one selector with another, it gets chained in the output file.

Any selector beyond a 3rd level of nesting is a bloat, unreadable garbage.

If you’ve nested that much

  • I’ll assume you’re obsessed about Inception
  • You like to live life dangerously
  • You believe – if it was hard to write, then it should be harder to read
.some-container .content-wrapper .discover-rightpanel .bottomSection .bottomSectionWrapper ul.listmain_Container li.list .wrapper .rightsection .topTitleSection .displayHolder .usercountmain .smarrtplus, .sliderDisplay_label {
  display: block;

wtf? seriously!

SASS is slow

While working with CSS files, I’m used to pressing F5 very often. It’s like OCD. When I say that I’m into a lot of F5s, I really expect the file to update instantly, zero latency.

Compass, you sucker, I can attribute several hours of work loss and instances of lost sanity to you and your slowness.

Do you know what happens during those 2.5-10 seconds of css compilation time?

A fairy dies.

Contrary to backend guys, the instant gratification monkey is at the helm of my brain, and it’s not used to it's compiling.. culture.

But then, what’s the point in just whining if I can’t find a remedy?

Here you go – I found libsass. Libsass is – fast, and close to what I can love or at least put up with. Compass is horribly slow – people using it, I really don’t know what to call them, but I’m sure they’ll get brain damage if they are exposed long enough to it.


Say, there is a P1 ticket – our buy now button (a.k.a. BOB) is terribly out of proportion in production. How do you fix it? Well. you look at the css class or ID and search for it’s occurrence in the directory.

Not to your surprise your selector looks like:

.some-container .content-wrapper .discover-rightpanel .bottomSection .bottomSectionWrapper ul.listmain_Container li.list .wrapper .rightsection .topTitleSection .displayHolder .usercountmain .big-orange-button {
  display: inline;
  margin: 15px 30px;

Oh, you can’t use ctrl+shift+f because this nesting is formed only after compilation.

Not a problem. You’re a SASS ninja and so were your ancestors (past programmers) and they’ve done a great job of following the right directory structure. Say, you easily to located that file.

Now what? Search for BOB, Ctrl + F and .big-orange-button?

OK, Found Results:

.some-container .content-wrapper .big-orange-button {}
.some-container .content-wrapper .discover-rightpanel .bottomSection .big-orange-button {}
.some-container .content-wrapper .discover-rightpanel .bottomSection .bottomSectionWrapper ul.listmain_Container li.list .wrapper .rightsection .topTitleSection .displayHolder .usercountmain .big-orange-button {}

OK, you usually won’t have multiple BOBs per page. But let’s say it’s not BOB, but some other important button.

Now, if this is the holy crap situation you’re in, how many ctrl+fs or how many scroll-downs you think you’ve to do to locate the 3rd one? (this can be a better interview question than answering why manholes are round and how many golf balls ..).

If it were normal CSS? Well, just a single ctrl+shift+f and the css selector.

Utopian Software Development doesn’t exist

You’ve been working in the project since years and yeaaaaaaaaars. And you have been pushing boundaries to ensure your team adheres to coding guidelines. But what if –

  • your project was outsourced offshore
  • or your company fired you & rest of staff, replaced them with college fresh men
  • or transferred this project to another team

Assume any of the above case and assume this was done without any knowledge transfer.

The rookies understand your equipment and toolbox. But they do not know where you kept the nuts and bolts. So, they start creating their own, merely duplicate content.

So, all those nicely crafted variables and mixins you painstakingly created and named all over the years is .. poof.. gone in a jiffy.. goes in vain. It’s a pile of garbage now.

Agree, that CSS definitely wouldn’t have been of any greater help in such a situation. But, SASS did no good either. It was rather a wastage of those person hours you spent debating.

Placeholder for future caption

Placeholder for future text

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s