Use a Base stylesheet file

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

_base.sass

!blueprint_grid_columns = 24
!blueprint_grid_width   = 30px
!blueprint_grid_margin  = 10px
!font_color              = #333
@import compass/reset.sass
@import compass/utilities.sass
@import blueprint/screen.sass
// 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.

It is important to define any compass/framework constants that you want to override in base.sass first, before @import-ing the framework files. See Overriding Constants , for an example of where the number of grid columns for blueprint is overridden/set to 32.
Note that you can refer to _base.sass without the leading underscore, since it is a partial .

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 descriptive 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 )