Better Performance with SASS & Compass
SASS, or Syntactically Awesome Stylesheets, is a framework for writing CSS in a more programmatic way. Compass provides additional awesomeness in the form of CSS3 and grid mixins, as well as automatic spriting.
We’ve been employing SASS & Compass in our new touch site that’s under development, and these tools are proving so useful that it’s just a matter of time before we transition our main website into SASS. Writing with variables for colors, auto-generated sprites, shorthand for nesting elements, easy packaging of stylesheets — all these things make development and maintenance lightning fast. However, having read a lot about SASS on the web, it seems to me that some folks aren’t keeping performance at the top of their priority list. Our touch site is going to be used by people in a variety of situations on the go, including an old clunky Android (like my own) with a spotty 3G connection. We need to keep our download sizes tiny. So what do we need to watch out for with SASS?
- Beware of mixins. Mixins allow you to reuse common chunks of code. Cool, huh? But it’s not so cool when your compiled code has a dozen redundant declarations bloating code on the clientside. I try to use mixins sparingly, and mostly they consist of Compass spitting out border-radius declarations for each relevant browser.
- Pack all the stylesheets into one for production. SASS allows you to create “partials”, which are stylesheets named like “_foo” and are imported into your main stylesheet in whatever order you’d like. The final result on the client is one uber-stylesheet that saves on calls to the server, while still allowing for the maintainability of multiple stylesheets.
- Nest responsibly. If you abuse nesting in SASS, you’ll end up with a lot of declarations that look like “#foo .bar ul li a span”. This is bad both because it’s more bytes (and those bytes add up) and also because the browser has to traverse the DOM just a little longer.
These are the main ways I try to keep my SASSy CSS performant — so far, so good! Our touch site-in-progress is super fast.
