Layout mixins for Drupal's Zen 2 theme

_layout.scss

@import "blueprint";

$zen-first-sidebar-width: 200px !default;
$zen-second-sidebar-width: 200px !default;
$zen-content-width: 560px !default;
$zen-gutter: 10px !default;
$zen-navigation-height: 1.5em !default;

$zen-page-width: $zen-first-sidebar-width + $zen-content-width + $zen-second-sidebar-width !default;

@mixin 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

@mixin zen-region($width, $first-margin: 0, $first: "left") {
  $second: "right";
  @if $first == "right" {
    $second: "left"; }
  //+reset-box-model
  @include 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.
@mixin zen-blueprint-region($width, $content: "no", $first-margin: 0, $first: "left") {
  @if $content == "width" {
    @include zen-region($width * $blueprint-grid-outer-width - $blueprint-grid-margin, $first-margin * $blueprint-grid-outer-width, $first); }
  @else if $content == "margin" {
    @include zen-region($width * $blueprint-grid-outer-width, $first-margin * $blueprint-grid-outer-width - $blueprint-grid-margin, $first); }
  @else {
    @include zen-region($width * $blueprint-grid-outer-width, $first-margin * $blueprint-grid-outer-width, $first); } }

@mixin zen-blueprint-layout($content-units: 24, $first-sidebar: 0, $second-sidebar: 0) {
  #content {
    @include zen-blueprint-region($content-units, width, $first-sidebar); }
  .region-sidebar-first {
    @include zen-blueprint-region($first-sidebar); }
  .region-sidebar-second {
    @include zen-blueprint-region($second-sidebar, margin, $first-sidebar + $content-units); }
  & .with-navigation {
    #content,.region-sidebar-first,.region-sidebar-second {
      margin-top: $zen-navigation-height; } } }

@mixin zen-blueprint-layout-rtl($content-units: 24, $first-sidebar: 0, $second-sidebar: 0) {
  #content {
    @include zen-blueprint-region($content-units, width, $first-sidebar, right); }
  .region-sidebar-first {
    @include zen-blueprint-region($first-sidebar, no, 0, right); }
  .region-sidebar-second {
    @include zen-blueprint-region($second-sidebar, margin, $first-sidebar + $content-units, right); }
  & .with-navigation {
    #content,.region-sidebar-first,.region-sidebar-second {
      margin-top: $zen-navigation-height; } } }