Friday, 17 August 2018: Magento 2 Technical Architecture training in BirkStaete Soest, Nederland » More information

Less CSS diet with SASS

With so many new web development tools appearing like mushrooms in fall, it is sometimes hard to keep up with it all. But one you must really not deprive yourself as a webdeveloper of is a CSS preprocessor. Currently, they come in two flavors: LESS and SASS.

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. 

Written by Jisse Reitsma op 4 September 2012

Looking for a training in-house?
Let's get to it!