Best Practices

Use a Base stylesheet file

Create a _base.sass partial to initialize your stylesheets with common variables and the framework utilities you plan to use:

_base.sass

@import compass/reset.sass
@import compass/utilities.sass
@import blueprint/screen.sass

!font_color           = #333

!layout_grid_columns = 24
!layout_grid_width = 30px
!layout_grid_margin = 10px

// etc.

The _base.sass file is also a great place to keep your own custom mixins, so they’re available to any stylesheet that includes it.

Then you can include this file in all other stylesheets:

application.sass

@import base.sass

#wrapper
  +container
// etc.

Write your own Custom Mixins

Mixins let you insert any number of style rules into a selector (and its descendants!) with a single line. This is a great way to DRY up your stylesheet source code and make it much more maintainable. Using mixins will also make your stylesheet look like self-documented source code — like using method names in a programming language. It’s much more obvious to read something like +round_corners(6px, #f00) than the whole list of rules which define that appearance.

Mixin Example

// Mixin for the html element, so the footer stays at the bottom of the screen.
// Relies on the following html structure, and a fixed-height #footer element:
//
//  %body
//    #root
//      #root_footer
//    #footer

=attach_footer( !footer_height )
  :height 100%
  body
    :height 100%
  #root
    :min-height 100%
    :margin-bottom  = -!footer_height
    #root_footer
      :clear both
      :height = !footer_height
  #footer
    :clear            both
    :position         relative
    :height         = !footer_height

A single line is all that’s needed to use the mixin, which moves the implementation details out of the way and replaces them with a clear and concise label:

html
  +attach_footer( 54px )