Zen + Blueprint + Compass/Sass layout tricks

__layout.sass

@import __base.sass
@import compass.sass

!zen_first_sidebar_width    = !zen_blueprint_left_units * !blueprint_grid_outer_width
!zen_second_sidebar_width   = !zen_blueprint_right_units * !blueprint_grid_outer_width
!zen_content_width = (!zen_blueprint_content_units * !blueprint_grid_outer_width) - !blueprint_grid_margin
!zen_gutter        = !blueprint_grid_margin
!zen_navbar_height = 40px

!zen_page_width             = !zen_first_sidebar_width + !zen_content_width + !zen_second_sidebar_width

=zen-region-visibility
  overflow: visible
  // A very nice CSS3 property
  word-wrap: break-word

//
  !width = width of the region
  !first_margin = first with respect to reading direction.
    - LTR = left margin
    - RTL = right margin
  !first = the first side with respect to reading direction
    - LTR = left
    - RTL = right

=zen-region(!width, !first_margin = 0, !first = "left")
  !second = "right"
  @if !first == "right"
    !second = "left"
  +reset-box-model
  +float(!first)
  width = !width
  margin:
    #{!first} = !first_margin
    #{!second} = - (!width + !first_margin)

// The !width and !first_margin arguments are blueprint units.
// The !content argument indicates whether the #content region is part of the
//   width of the region or the margin.
=zen-blueprint-region(!width, !content = "no", !first_margin = 0, !first = "left")
  @if !content == "width"
    +zen-region((!width * !blueprint_grid_outer_width) - !blueprint_grid_margin, !first_margin * !blueprint_grid_outer_width, !first)
  @else if !content == "margin"
    +zen-region(!width * !blueprint_grid_outer_width, (!first_margin * !blueprint_grid_outer_width) - !blueprint_grid_margin, !first)
  @else
    +zen-region(!width * !blueprint_grid_outer_width, !first_margin * !blueprint_grid_outer_width, !first)

// This mixin puts the content region between the first and second sidebars.
=zen-blueprint-layout(!content_units = 24, !first_sidebar = 0, !second_sidebar = 0)
  #content
    +zen-blueprint-region(!content_units, "width", !first_sidebar)
  #sidebar-first
    +zen-blueprint-region(!first_sidebar)
  #sidebar-second
    +zen-blueprint-region(!second_sidebar, "margin", !first_sidebar + !content_units)
  #content,#sidebar-first,#sidebar-second
    margin-top = !zen_navbar_height

layout-fixed.sass

// $Id$

//
  @file
  Layout Styling (DIV Positioning)

  Define CSS classes to create a table-free, 3-column, 2-column, or single
  column layout depending on whether blocks are enabled in the left or right
  columns.

  This layout is based on the Zen Columns layout method.
    http://drupal.org/node/201428

  Only CSS that affects the layout (positioning) of major elements should be
  listed here.  Such as:
    display, position, float, clear, width, height, min-width, min-height
    margin, border, padding, overflow

@import __base.sass
@import __layout.sass

//
  Body

body

#page
  //
    If you want to make the page a fixed width and centered in the viewport,
    this is the standards-compliant way to do that. See also the ie6.css file
    for the necessary IE5/IE6quirks hack to center a div.
  margin-left: auto
  margin-right: auto
  width = !zen_page_width
  padding = !zen_gutter

#page-inner

#navigation-top,
#navigation
  // Take the named anchors out of the doc flow
  // and prevent any anchor styles from appearing.
  position: absolute
  left: -10000px

#skip-to-nav
  // LTR
  +float("right")
  margin: 0 !important
  font-size: 0.8em

  a
    text-align: center
    margin-top: -20px
    display: block
    // Same as background color of page
    +link-colors(white, black, black, white, black)
    +hover-link


//
  Alternatively, the skip-to-nav link can be completely hidden until a user tabs
  to the link. Un-comment the following CSS to use this technique.
//
  #skip-to-nav a, #skip-to-nav a:hover, #skip-to-nav a:visited
  {
    position: absolute;
    left: 0;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  #skip-to-nav a:active, #skip-to-nav a:focus
  {
    position: static;
    width: auto;
    height: auto;
  }

//
  Header

#header

#header-inner

#logo-title

#logo
  // LTR
  +float

#site-name

#site-slogan

#search-box

#header-blocks
  // Clear the logo
  clear: both
  position: relative

//
  Main (container for everything else)

#main
  position: relative

#main-inner

//
  Content

#content,
.no-sidebars #content
  +zen-blueprint-region(!zen_blueprint_left_units + !zen_blueprint_content_units + !zen_blueprint_right_units, "width")

.sidebar-first #content
  +zen-blueprint-region(!zen_blueprint_content_units + !zen_blueprint_right_units, "width", !zen_blueprint_left_units)

.sidebar-second #content
  +zen-blueprint-region(!zen_blueprint_left_units + !zen_blueprint_content_units, "width")

.two-sidebars #content
  +zen-blueprint-region(!zen_blueprint_content_units, "width", !zen_blueprint_left_units)

#content-inner
  +reset-box-model

//
  Navbar

#navbar
  +zen-region(100%)
  height = !zen_navbar_height
  //
    The navbar can have any arbritrary height. We picked one that is twice the
    line-height pluse 1em: 2 x 1.3 + 1 = 3.6
    Set this to the same value as the margin-top below.

.with-navbar
  #content, #sidebar-first, #sidebar-second
    margin-top = !zen_navbar_height

#navbar-inner

#search-box,
#block-search-0
  position: absolute
  bottom: 0
  text-align: right
  right: 0
  background-color: black
  width = !blueprint_grid_width * 8 + (!blueprint_grid_margin * (8 - 1)) + (!blueprint_grid_margin / 4)

#primary
  // Width of search-box
  margin-left: 0

#secondary
  // Width of search-box
  margin-left: 0

#navbar
  // Primary and secondary links
  ul
    // Primary and secondary links
    +reset-box-model
    // A simple method to get navbar links to appear in one line.
    +horizontal-list(10px)
    // There are many methods to get navbar links to appear in one line.
    // Here's an alternate method:
    // +inline-list
    // LTR
    text-align: left

//
  First sidebar

#sidebar-first
  +zen-blueprint-region(!zen_blueprint_left_units)

#sidebar-first-inner
  +reset-box-model
  // LTR
  margin:
    right = !zen_gutter

//
  Second sidebar

#sidebar-second
  +zen-blueprint-region(!zen_blueprint_right_units, "margin", !zen_blueprint_left_units + !zen_blueprint_content_units)

#sidebar-second-inner
  +reset-box-model
  // LTR
  margin:
    left = !zen_gutter

//
  Footer

#footer

#footer-inner

//
  Closure

// See also the #page declaration above that this div shares.
#closure-blocks

//
  Markup free clearing

.clearfix
  +pie-clearfix

//
  Prevent overflowing content

#header,
#content,
#navbar,
#sidebar-first,
#sidebar-second,
#footer,
#closure-blocks
  +zen-region-visibility

#navbar
  // May need to be removed if using a dynamic drop-down menu
  overflow: hidden

//
  If a div.clear-block doesn't have any content after it and its bottom edge
  touches the bottom of the viewport, Firefox and Safari will mistakenly
  place several pixels worth of space between the bottom of the div and the
  bottom of the viewport. Uncomment this CSS property to fix this.
  Note: with some over-large content, this property might cause scrollbars
  to appear on the #page div.
//
  #page
  {
    overflow-y: hidden;
  }

body.content-prime.sidebar-second
  +zen-blueprint-layout(16, 0, 8)
  #content-area
    +span(14)
  #node-sidebar
    +span(5)
    +push(2)
    margin-left: 20px
    margin-bottom: 20px


// This rule set puts the content to the left of both sidebars, so zen-blueprint-layout mixin won't do.
body.content-newswire
  #content
    +zen-blueprint-region(12, "width")
  #sidebar-first
    +zen-blueprint-region(6, "margin", 12)
  #sidebar-first-inner
    +reset-box-model
    // LTR
    margin:
      left = !zen_gutter
  #sidebar-second
    +zen-blueprint-region(6, "margin", 18)
  #sidebar-second-inner
    +reset-box-model
    // LTR
    margin:
      left = !zen_gutter
  #content,#sidebar-first,#sidebar-second
    margin-top = !zen_navbar_height