Speeding up SASS

After several months working on a pretty complicated css framewok for our new theme, things have started getting really slow in Netbeans. Like, 20-30 seconds sometimes. Part of how I set up concrete5 themes lately is to keep a separate typography.css file explicitly for the tinymce editor, but not include that in the main theme. This way it's easier to tweak things without having to keep them both using the same file and potentially having issues with inheritance and overriding things cleanly. With dozens of smaller files to compile, every time I hit save somewhere for a minor tweak, it would have to compile both of those, reading all of the intermediate pieces.

It was really getting unworkable, and making it almost impossible to get anything done. 

Turns out this is a known issue. Thankfully, I'm already doing a lot of the best practices, using Bourbon and Neat rather than Compass and Susy. So the transition wouldnt' be that difficult. Realistically, you wouldn't think that a few seconds is that big of a deal, but it is. Not just in the amount of productivity lost waiting, but the potential to derail the chain of thought. 

SASSC to the Rescue

Ask anyone who knows much about programming, and they'll agree that an interpreted language like node.js or ruby is going to be slower than a compiled language like C. And that's the whole problem here. I could finish switching over to my ssd, but really don't have the time and throwing hardware at a problem isn't a good solution. 

Unfortunately, the guides to install it are all a bit technical. OK, really technical. And sparse. I guess that the thinking is "If they know enough to be forking these repos because they have a sass project that is complex enough to slow down like this, they probably already know what they are doing." This guide had most of the steps that were needed. I only had a few things to note.

  • I used the updated versions of the libraries. 3.2.4 instead of 3.2.1. I had to look at the releases tab on each repo to find out what was the most recent. It's a bit unnerving to see names like "Patchwork Quilt" "Patch Adams" or "Reassurance Elbow Suite" but as long as what you clone is consistent for each, you should be good. 
  • I got a lot of errors along the lines of "Makefile:131: *** SASS_LIBSASS_PATH must be defined. Stop." At first I thought it was because of not supplying the -E flag when using sudo. That was partly true, but it wasn't the whole thing. Another part was that the libsass wasn't actually compiled so I used autotools to fix that. On top of that, I ended up removing the quotes around the path when echoing into /etc/environment.
  • Instead of going into /usr/local/bin/ and then using a relative path, I put it in as a full path from the root. 

What about IDE integration?

Even after it was all working, I still had to make sure that it works with Netbeans. Apparently, two arguments are passed from java that aren't actually in the specifications. Once you've changed to the c compiler from the ruby or node wrapper, stuff like that matters. Hoping that it doesn't pop up somewhere elese in the code later, but it could. Willing to bet that other IDEs could have similar issues.

The workaround shown here almost had it, but not completely. The reason was that there was another argument that was getting sent. That was because I had 'send debug output' included. I didn't need that, so unchecked it in the IDE options dialog. If I did need it, then I could have just adjusted the number used for the argument. 

I did need the source maps so I can see where styles are actually coming from when inspecting in the browser. That was happening automatically with the ruby version (think that's what I was using) but not with sassc. Thankfully, using the proxy lets me add those arguments if I need them. 

That gives me a minimized css output file with a source map. It could be adjusted to have any extra arguments you need pretty easily. I'll have to dig into that more later. I do like just getting automatically minified files like that every time that I hit save, though I'm not sure how well it will work in a team environment. That's going to be one of the big things that I need to figure out - how to get anyone else on the team that needs to be able to use this stuff up to speed with everything installed. That goes doubly if I try to find a vendor that can handle it.

Honestly, without any tweaks, it's pretty close to what already is generated, so maybe they'll just be the ones dealing with frustrating slow compile times. ;)

blog comments powered by Disqus