Have you ever used Sass before?
A couple of months ago I migrated from Less to Sass and I never looked back. Especially when I found the power of Compass. But then, one Friday morning, I woke up and realised my .scss files were about 150kb in total and then all hell broke loose. Such a large script using Compass takes no less than 10 seconds to compile on my above-average-ssd-powered laptop. That’s no good. I can’t afford to wait 10 seconds each time I change a 10em padding to 20em and hit save.
I’ve already heard stories about a mythical creature called LibSass that would compile much much faster on Windows PCs, but since there wasn’t a pre-built executable available anywhere, e.g. I had to compile it myself, I couldn’t be bothered with it before.
Well, the frustration won over my laziness and I spent almost an entire day reading about the lib and how to compile it under Windows 10. Couple of hours later I had Visual Studio installed (20 gigs on a 128g SSD… it hurts), all requirements downloaded, so I hit build and held my breath.
Of course, I also had to migrate everything from Compass to Bourbon, cause compass had way too many issues when used as a standalone lib with LibSass.
After a couple of minutes a 3MB exe emerged and I was really eager to compare it with the NodeJS alternative I’ve been using so far. At first the times were not much better, at all. It dropped from 16 seconds with the nodejs to about 14.5 seconds with libsass :|
Turns out I was building in a “debug” mode, so I pushed a couple of switches and run the build again, this time “optimized for performance”. And voila! 16 secs dropped down to less than a second (yey!).
Since then I’ve been using my personally-built exe and my life have never been easier :) I strongly recommend giving it a try, but I do have to point out two major “aha” moments you might have.
First, bourbon lacks a lot of mixins you might have gotten used to in compass. Like border-radius, box-shadow and even opacity. However, once you take the time to investigate why that is so, you’ll find out that those missing mixins are pretty much obsolete as almost all major browsers now support them without the nifty prefixes.
So, that’s a win-win situation – less mixins, less generated CSS, less time for compiling.
The second things is that there are a couple of moments where things just don’t work as you’d expect them to. For two months of heavy usage I found that Bourbon’s default transition mixin breaks down when there a transform in the value. I still don’t know why this is the way it is, but it is NOT a Bourbon issue, it’s a LibSass quirk.
If you are going to use this combination do look out for this issue as it could be really frustrating. If you happen to stumble upon it, take a look at this: https://github.com/thoughtbot/bourbon/issues/794 It’s the original issue I created when I found the problem and there’s also a simple mixin I posted in the comments, that pretty much seems to work just fine for now.