SCSS For Grids

scss-grid.scss

// Grid related variables
// 995px by 26 columns
$gw-column: 20px;
$gw-gutter: 19px;

$grid-image: '/assets/images/content_images/995px-26col-20w-19gut.png';

// Grid span columns
@mixin span-columns($span: $columns) {

  $columns: nth($span, 1);

  display: block;
  float: left;
  width: grid-width($columns);
  margin-right: $gw-gutter;

    &:last-child {
      margin-right: 0;
    }
  
}


// Clearfix / row container
@mixin row($display: block) {
  @include clearfix;
  @if $display == table {
    display: table;
  }

  @else {
    display: block;
  }
}

// Shift
@mixin shift($n-columns: 1) {
  margin-left: $n-columns * $gw-column + $n-columns * $gw-gutter;
}

// Remove element gutter
@mixin omega($display: block, $direction: right) {
  @if $display == table {
    padding-#{$direction}: 0;
  }

  @else {
    margin-#{$direction}: 0;
  }
}

@mixin nth-omega($nth, $display: block, $direction: right) {
  @if $display == table {
    &:nth-child(#{$nth}) {
      padding-#{$direction}: 0;
    }
  }

  @else {
    &:nth-child(#{$nth}) {
      margin-#{$direction}: 0;
    }
  }
}

// Fill 100% of parent
@mixin fill-parent() {
  width: 100%;

  @if $border-box-sizing == false {
    @include box-sizing(border-box);
  }
}