Compass

There's a lot of talk going on on which one to choose, but the difference between the two - for all intents and purposes - is really not that big. I'm neither for nor against any particular one of them, but I chose SASS because it allowed me to use Compass Framework at the same time.

Tables

Now, I come from an age where there was no CSS. We used tables for layouts - will pause here a little to give you time to gasp in surprise and disgust - and used Arial and Times as our main typefaces. After the era of inline styles, I used to painstakingly write each individual line of CSS by hand, thus repeating myself over and over again for each of the sites I have written over the years.

Clean Markup

Needless to say that SASS was love at first sight for me. I happily started extending my style rules and nesting them to give my stylesheets better readability. Oh, how proud I was of myself for hardly needing any of the so called representational class names so despised by the more self-indulgent members of our web development community. I used an auto-compiler so that every change was reflected in my browser immediately and life was good.

Here comes the but

But then (you saw that coming, didn't you?) the auto-compiler took longer and longer to compile my CSS. First, I thought it was due to the fact that I had included an icon font. The embedded SVG in those can be somewhat demanding when processing you rules. I lived with it for a bit. I also noticed the occasional stacking of selectors but ignored it. It was only after I checked the site I was building on MSIE when I discovered that my stylesheet (that was really small when I started out) had become a big, fat, ugly SOB.

Diet

So, I put the thing on a diet (all 2000 lines or so). I forced myself to go over each rule and as soon as I had removed the first few extends, my code dropped about 40Kb in size. Not bad, as I was only at about line 100 in my code. Then I started shallowing my nested rules. Again, the size dropped further. By the time I was done (it took me a good 5 hours or so) I had reduced my compiled CSS to an impressive 27,5793651 percent at the cost of re-introducing a handful of classes into my markup. I am sure I can bring it back even further in size if I gave it another look, but for now I was content.

Lesson learnt, and for my next SASS project (I will never, ever, build a site without it ever again) I will keep a constant eye out for the size of my stylesheets.