Organize your SASS Files with Includes

I’m a stickler for keeping my files neat. So, when I started using Sass to manage my CSS files, I fell in love. Being able to nest elements neatly under their parents is awesome. Also, using mixins to get rid of all the browser prefix clutter, makes a huge difference. Its easy to see that me and Sass quickly became best friends. As a not so good friend, however, I feel I might have neglected Sass a bit and not seen its full potential.

Includes More for Just Mixins?

Currently the only time I use includes in my Sass file is to include mixins or platform specific styles, like WordPress. Recently, however, I had the pleasure of working on a rather tricky build for Comcast at O3 World. The site had a lot of UI elements to keep track of, and a bunch of differently grids that changed per view via media queries. For the most part, my experience with grids has been just breaking the grid from a 4 to 2 to a single column. This build, however, had 5 to 3 with borders and padding to 3 to 1, and other pages with 3 to 2 with border to 2 to 1, all the while swapping out icons, floats, border sizes, etc. Needless to say my CSS got very bloated very quickly. With the help of Sass, however, I was able to recognize patterns and make some really great cascading, mobile first code.

Despite all my efforts, my Sass file, with all the media queries for width, pixel density, etc, was well over 2000 lines. Ugh… not so tidy and agile. So in an attempt to make the file more manageable I used really big comment blocks to separate the sections, and used Sublime Text 2’s handy sidebar to easily drag from point to point. Even with this approach, navigating the file was still tiresome and caused my eyes to strain from the scrolling.

So this morning, with the site on the brink of being launched I thought about the bug reports that will come in, and how I’ll need to navigate that 2000 line document in order to find the style I’m looking for… sure enabling comments in your Sass file helps, but there should be an easier way… Then it hit me, why not take advantage of includes to breakout media queries and rarely updated code like resets, or helper classes… Bingo… Now if I need to make an edit to the 1024 view, all I need to do is crack open the 200 line _media_1024.scss file and I can find that line easily. Now with the media queries, the lightbox, and helper styles broken out, my main, mobile first Sass file is sitting at right about 800 lines… a little more manageable. In addition, this method also maintains my cursor better, so if I’m working on a element across media queries, its a lot easier.

So what do you think? Am I abusing the include? Do you nest your media queries inside the element your editing? How do you navigate long stylesheets better?

posted in: Best Practices, Front End Development
tagged: , ,

1 Comment
  1. Tim

    I think this is a great idea – I’m using the Bones framework for Genesis, and its looong… I’m definitely going to give this a try. I use Less during development, and just output a single stylesheet, so no performance hits or FOUC – easy!