Syntactically Awesome Stylesheets (SASS) & 1KB Grid

I do quite a bit of CSS at work.  When I do it on my own, I use a little productivity tool called Syntactically Awesome Stylesheets or SASS.  It's the single reason I went from tolerating to loving CSS.  The most obvious improvement is the .SASS formatting for rules.  It borrows tab-oriented markup from Python and really takes the visual clunk out of CSS.  Add to that easy-to-use features like variables and inheritance (something I always think about when using bare CSS), and SASS saves some energy and elevates CSS to something I now find very fun.

For instance, at work I was looking for an easy to use CSS Grid for a project.  I found 1KB Grid, a lightweight and straightforward set of rules for grids.  On their site, you can parametrically design the layout and then generate your personalized CSS based on number of columns, gutter width, and column width.  Since the templates at work use a set width already, I wanted to parameterize based on number of column, width of gutters, and total width.  I knew SASS would enable me to implement it quickly.

You can find the resulting .SASS file in one of my GitHub gists.  In just 30 lines, it can generate files just like the 1KB grid generator, but tweaked for different parameters and slightly different classes.  This really shows how SASS is not just a few shortcuts, but rather a complete engine for building reusable templates.