Drupal Zen layout mixins

_drupal-zen.scss

$zen-width: 960px !default;
$zen-content-position: middle !default; //possible values are first, middle, last
$zen-first-sidebar-width: 200px !default;
$zen-second-sidebar-width: 200px !default;
$zen-navigation-width: 100% !default;
$zen-navigation-height: 2.3em !default;

@mixin zen-layout($direction: "ltr") {

  $first: "left";
  $last: "right";

  @if $direction == "rtl" {
    $first:  "right";
    $last: "left";
  }

  #page-wrapper, .region-page-closure { width: $zen-width; }

  #content {
    @include float($first);
    width: $zen-width;
    margin-#{$first}: 0;
    margin-#{$last}: -($zen-width);

    .sidebar-first & {
      width: $zen-width - $zen-first-sidebar-width;
      @if $zen-content-position == "first" {
        margin-#{$first}: 0;
        margin-#{$last}: -($zen-width - $zen-first-sidebar-width);
      }
      @else {
        margin-#{$first}: $zen-first-sidebar-width;
        margin-#{$last}: -($zen-width);
      }
    }

    .sidebar-second #content {
      width: $zen-width - $zen-second-sidebar-width;
      @if $zen-content-position == "last" {
        margin-#{$first}: $zen-second-sidebar-width;
        margin-#{$last}: -($zen-width);
      }
      @else {
        margin-#{$first}: 0;
        margin-#{$last}: -($zen-width - $zen-second-sidebar-width);
      }
    }

    .two-sidebars #content {
      width: $zen-width - $zen-first-sidebar-width - $zen-second-sidebar-width;
      @if $zen-content-position == "middle" {
        margin-#{$first}: $zen-first-sidebar-width;
        margin-#{$last}: -($zen-width - $zen-second-sidebar-width);
      }
      @if $zen-content-position == "first" {
        margin-#{$first}: 0;
        margin-#{$last}: -($zen-width - $zen-first-sidebar-width - $zen-second-sidebar-width)
      }
      @if $zen-content-position == "last" {
        margin-#{$first}: $zen-first-sidebar-width + $zen-second-sidebar-width;
        margin-#{$last}: -($zen-width);
      }
    }
  }

  .region-sidebar-first {
    @include float($first);
    width: $zen-first-sidebar-width;
    @if $zen-content-position == "first" {
      margin-#{$first}: $zen-width - $zen-first-sidebar-width;
      margin-#{$last}: -($zen-width);
      .two-sidebars & {
        margin-#{$first}: $zen-width - $zen-first-sidebar-width - $zen-second-sidebar-width;
        margin-#{$last}: -($zen-width - $zen-second-sidebar-width)
      }
    }
    @else {
      margin-#{$first}: 0;
      margin-#{$last}: -$zen-first-sidebar-width;
    }
  }

  .region-sidebar-second {
    @include float($first);
    width: $zen-second-sidebar-width;
    @if $zen-content-position == "last" {
      margin-#{$first}: 0;
      margin-#{$last}: -$zen-second-sidebar-width;
      .two-sidebars & {
        margin-#{$first}: $zen-first-sidebar-width;
        margin-#{$last}: -($zen-second-sidebar-width + $zen-first-sidebar-width)
      }
    }
    @else {
      margin-#{$first}: $zen-width - $zen-second-sidebar-width;
      margin-#{$last}: -($zen-width);
      .two-sidebars & {
        margin-#{$first}: $zen-width - $zen-first-sidebar-width - $zen-second-sidebar-width;
        margin-#{$last}: -($zen-width - $zen-first-sidebar-width);
      }
    }
  }
}

@mixin zen-navigation($direction: "ltr") {

  @if $direction == "rtl" {
    $first:  "right";
    $last: "left";
  }
  @else {
    $first: "left";
    $last: "right";
  }

  #navigation {
    @include float($first);
    width: $zen-navigation-width;
    margin-#{$first}: 0;
    margin-#{$last}: -$zen-navigation-width;
    height: $zen-navigation-height;
  }

  .with-navigation {
    #content, .region-sidebar-first, .region-sidebar-second {
      margin-top: $zen-navigation-height;
  } }

  #navigation {
    ul {
      text-align: $first; }
    li {
      @include float($first);
      padding: 0;
      padding-#{$last}: 10px; } }
}

@mixin zen-dropdown-navigation {
  #navigation {
    overflow: visible;
  }
}

@mixin zen-clearfix-fix { //ironic, isn't it?
  #page-wrapper {
    overflow-y: hidden;
  }
}