Organizing SASS files

While developing a couple of Facebook apps, I found out that our stylesheet file sizes were getting too big, and it forced me to be more circumspect in organizing my SASS files. I use the Compass gem and Blueprint platform exclusively when developing views, and the ease of use tends to get me spoiled at times, which quickly results in a lot of bloat.

So far, this has been my approach:

• _init.sass groups all constants in one place – font colors, link colors, border colors, etc.
• _base.sass is for declaring mixins into their proper scopes
• The utilities dir is for all the disparate classes – I hate going through long stylesheets, @import is a godsend.
• Important part: page-specific stylesheets are included in the specific view, and I mimic the view structure for easier access. This way, I only include commonly-used classes in the application stylesheet, which usually comes in at 24KB

In the view, just do

My structure in the app/stylesheets dir:

• _base.sass
• _init.sass
• layouts
  • application.sass
  • admin.sass
• utilities
  • _forms.sass
  • _links.sass
  • _navigation.sass
  • _tables.sass
• pages
  • home
    • index.sass
    • about.sass
  • users
    • new.sass

Note when developing the UI for Facebook apps:
Make sure you scope your mixins properly or else you will override the Facebook classes and mess up its components (the multifriend selector, for one).