SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

// Jeet 5 - http://jeet.gs

/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: jeet(gutter))
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: jeet(gutter))
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/

// Grid Settings
$jeet: (
  gutter: 3,
  parent-first: false,
  layout-direction: LTR
);

// Sass Namespacing Function
@function jeet($var) {
  @return map-get($jeet, $var);
}

$g: jeet(gutter);

// List functions courtesy of the wonderful folks at Team Sass - check out their awesome grid: Singularity
@function -get_span($ratio: 1) {
  @return $ratio * 100;
}
@function -get_column($ratios: 1, $g: jeet(gutter)) {
  @if (jeet(parent-first) != 'true') {
    $ratios: -reverse($ratios);
  }
  $w: 100;
  @each $ratio in $ratios {
    $g: $g / $w * 100;
    $w: 100 * $ratio - $g + $ratio * $g;
  }
  @return $w $g;
}
@function -get_layout_direction() {
  $result: '';
  @if jeet(layout-direction) == RTL {
    $result: right;
  } @else {
    $result: left;
  }
  @return $result;
}
@function -replace-nth($list, $index, $value) {
  @if type-of($index) != number or $index == 0 or abs($index) > length($list) {
    @warn "Invalid index (#{$index}) for `replace-nth`.";
    @return false;
  }
  $list: set-nth($list, $index, $value);
  @return if(not is-true($value), purge($list), $list);
}
@function -reverse($list, $recursive: false) {
  $result: ();
  @for $i from length($list)*-1 through -1 {
    @if type-of(nth($list, abs($i))) == list and $recursive {
      $result: append($result, reverse(nth($list, abs($i)), $recursive));
    } @else {
      $result: append($result, nth($list, abs($i)));
    }
  }
  @return $result;
}
@function opposite-direction($dir) {
  @if $dir == 'left' {
    @return right;
  }
  @else if  $dir == 'right' {
    @return left;
  }
  @else if $dir == 'ltr' {
    @return rtl;
  }
  @else if $dir == 'rtl' {
    @return ltr;
  }
  @else if $dir == 'top' {
    @return bottom;
  }
  @else if $dir == 'bottom' {
    @return top;
  }
  @else {
    @warn "#{$dir} is not a direction! Make sure your direction is all lowercase!";
    @return false;
  }
}

// Columns with Gutters
@mixin column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: jeet(gutter)) {
  $side: -get_layout_direction();
  $column_widths: -get_column($ratios, $gutter);
  $margin_last: 0;
  $margin_l: $margin_last;
  $margin_r: nth($column_widths, 2);
  @if $offset != 0 {
    @if $offset < 0 {
      $offset: $offset * -1;
      $offset: nth(-get_column($offset, nth($column_widths, 2)), 1);
      $margin_last: $offset + nth($column_widths, 2) * 2;
      $margin_r: $margin_last;
    } @else {
      $offset: nth(-get_column($offset, nth($column_widths, 2)), 1);
      $margin_l: $offset + nth($column_widths, 2);
    }
  }
  @include cf();
  float: $side;
  display: inline;
  clear: none;
  text-align: inherit;
  padding-left: 0;
  padding-right: 0;
  width: nth($column_widths, 1) * 1%;
  margin-#{$side}: $margin_l * 1%;
  margin-#{opposite-direction($side)}: $margin_r  * 1%;
  @if $uncycle != 0 {
    &:nth-child(#{$uncycle}n) {
      margin-#{opposite-direction($side)}: $margin_r * 1%;
      float: $side;
    }
  }
  @if $cycle != 0 {
    &:nth-child(#{$cycle}n) {
      margin-#{opposite-direction($side)}: $margin_last * 1%;
      float: opposite-direction($side);
    }
  } @else {
    &:last-child {
      margin-#{opposite-direction($side)}: $margin_last * 1%;
    }
  }
}
@mixin col($args...) {
  @include column($args...);
}

// Columns without Gutters
@mixin span($ratio: 1, $offset: 0) {
  $side: -get_layout_direction();
  $span_width: -get_span($ratio);
  $margin_r: 0;
  $margin_l: $margin_r;
  @if $offset != 0 {
    @if $offset < 0 {
      $offset: $offset * -1;
      $margin_r: -get_span($offset);
    } @else {
      $margin_l: -get_span($offset);
    }
  }
  @include cf();
  float: $side;
  display: inline;
  clear: none;
  padding-left: 0;
  padding-right: 0;
  text-align: inherit;
  width: $span_width * 1%;
  margin-#{$side}: $margin_l * 1%;
  margin-#{opposite-direction($side)}: $margin_r * 1%;
}

// Source Ordering
@mixin shift($ratios: 0, $col_or_span: column, $gutter: jeet(gutter)) {
  $translate: '';
  $side: -get_layout_direction();
  @if $side == right {
    $ratios: -replace_nth($ratios, 0, nth($ratios, 1) * -1);
  }
  @if $col_or_span == column or $col_or_span == col or $col_or_span == c {
    $column_widths: -get_column($ratios, $gutter);
    $translate: nth($column_widths, 1) + nth($column_widths, 2);
  } @else {
    $translate: -get_span($ratios);
  }
  position: relative;
  left: $translate * 1%;
}
@mixin unshift() {
  position: static;
  left: 0;
}

// Edit Mode
@mixin edit() {
  * {
    background: #eee;
    background: rgba(#000, .05);
  }
}

// Horizontal Centering Block Elements
@mixin center($max_width: 1410px, $pad: 0) {
  @include cf();
  width: auto;
  max-width: $max_width;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: $pad;
  padding-right: $pad;
}

// Stacking/Unstacking Elements
@mixin stack($pad: 0, $align: false) {
  $side: -get_layout_direction();
  display: block;
  clear: both;
  float: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  &:first-child {
    margin-#{$side}: auto;
  }
  &:last-child {
    margin-#{opposite-direction($side)}: auto;
  }
  @if $pad != 0 {
    padding-left: $pad;
    padding-right: $pad;
  }
  @if ($align is not false) {
    @if ($align == center) or ($align == c) {
      text-align: center;
    }
    @if ($align == left) or ($align == l) {
      text-align: left;
    }
    @if ($align == right) or ($align == r) {
      text-align: right;
    }
  }
}
@mixin unstack() {
  $side: -get_layout_direction();
  display: inline;
  clear: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  &:first-child {
    margin-#{$side}: 0;
  }
  &:last-child {
    margin-#{opposite-direction($side)}: 0;
  }
  @if (jeet(layout-direction) == RTL) {
    text-align: right;
  } @else {
    text-align: left;
  }
}

// Horizontal/Vertical/Both Alignment - Parent container needs position relative. IE9+
@mixin align($direction: both) {
  position: absolute;
  @if ($direction == horizontal) or ($direction == h) {
    left: 50%;
    transform: translateX(-50%);
  } @else if ($direction == vertical) or ($direction == v) {
    top: 50%;
    transform: translateY(-50%);
  } @else {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// Clearfix
@mixin cf() {
  *zoom: 1;
  &:before, &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

@include edit();

SassMeister-output.css

/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: jeet(gutter))
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: jeet(gutter))
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/
* {
  background: #eee;
  background: rgba(0, 0, 0, 0.05);
}