Salsa style, simplifyed layout mixin.

layout-mixin.scss

/////////////////////////////////////////////////
////  Salsa style layout mixin. Simplified.  ////
/////////////////////////////////////////////////

// See usage examples below. 

$flow: left !default;
$opos: if($flow == left, right, left);

// Compass is needed only for the box-sizing() mixin.
@import "compass";

@mixin layout($width, $position: false) {

  @include box-sizing(border-box);

  // Width (fraction/units)
  @if not unitless($width){ // arbitrary width (e.g. px/%/em etc.).
    width: $width;
  }
  @else if round($width) != $width { // fraction (e.g. 1/5).
    width: 100% * $width;
  }
  @else { // just a fallback.
    width: $width;
  }

  // Position (omega/row/fraction/columns/units)
  @if $position != omega {
    float: $flow; // normal float
  }
  @if $position == omega { // omega
    float: $opos;
  }

  @else if $position == row { // row
    clear: both;
  }
  @else if $position {
    margin: {
      #{$opos}: -100%;
      @if not unitless($width) { // has unit, arbitrary width
        #{$flow}: $position;
      }
      @else if round($position) != $position { // fraction
        #{$flow}: $position * 100%;
      }
      @else { // fallback
        #{$flow}: $position;
      }
    }
  }
}

.simple {
  @include layout(200px);  
}

.percent-pushed {
  @include layout(50%, 50%);  
}

.percent-pulled {
  @include layout(50%, 0);  
}

.last-item {
  @include layout(200px, omega);  
}

.first-in-a-new-row {
  @include layout(30%, row);  
}

.fraction {
  @include layout(1/5);  
}