AXLE OOCSS Framework grid port (LESS to SCSS)

design.css.scss

.grid-1 { @include grid_12(1); }
.grid-2 { @include grid_12(2); }
.grid-3 { @include grid_12(3); }
.grid-4 { @include grid_12(4); }
.grid-5 { @include grid_12(5); }
.grid-6 { @include grid_12(6); }
.grid-7 { @include grid_12(7); }
.grid-8 { @include grid_12(8); }
.grid-9 { @include grid_12(9); }
.grid-10 { @include grid_12(10); }
.grid-11 { @include grid_12(11); }
.grid-12 { @include grid_12(12); }

grid.css.scss

// ...............
// 960 GRID SYSTEM
// ...............
//
// Created by Nathan Smith. See the official site for more info: http://960.gs/
//
// GPL license:
// http://www.gnu.org/licenses/gpl.html
//
// MIT license:
// http://www.opensource.org/licenses/mit-license.php
// ---------------------------------------------------------------------------
//
// Updated by Dale Sande for AXLE (http://axle.dalesande.com/)
//
// Attempt to port to SASS by Zachery Moneypenny

///////// Base values for building grid ///////////
// ------------------------------------------------
$base_10: 1.04%; // equal to 10px in the standard 960.gs
$base_20: 2.084%; // equal to 20px in the standard 960.gs
$base_40: 4.17%; // equal to 40px in 16 col standard 960.gs
$base_60: 6.25%; // equal to 60px in 12/16 col standard 960.gs
$base_80: 8.4%; // equal to 80px in 12 col standard 960.gs

@mixin position() {
  position: relative;
}

@mixin grid_placement() {
  display: inline;
  float: left;
  margin: 0 $base_10;
}

@mixin grid_support_math($col_count, $base_value) {
  $gutter_count: $col_count - 1;
  $gutter_value: $gutter_count * $base_20;
  $col_count_width: $col_count * $base_value;
  @include grid_placement;

  width: $col_count_width + $gutter_value;
}



///////// 12 col 960 grid system ///////////
// ----------------------------------------
@mixin grid_12($col_count) {
  $base_value: $base_60;  
  @include grid_support_math($col_count, $base_value);
}


///////// 16 col 960 grid system ///////////
// ----------------------------------------
@mixin grid_16($col_count) {
  @include grid_support_math;
  $base_value: $base_40;
}


///////// prefix value accounts for a full column in the grid ////////////
// -----------------------------------------------------------------------
@mixin prefix_12($col_count) {
  padding-left: $base_80 * $col_count;
}

@mixin prefix_16($col_count) {
  padding-left: $base_60 * $col_count;
}



///////// suffix value accounts for a full column in the grid ////////////
// -----------------------------------------------------------------------

@mixin suffix_12($col_count) {
  padding-right: $base_80 * $col_count;
}

@mixin suffix_16($col_count) {
  padding-right: $base_60 * $col_count;
}



///////// push value accounts for a full column in the grid ////////////
// -----------------------------------------------------------------------

@mixin push_12($col_count) {
  left: $base_80 * $col_count;
  @include position;
}

@mixin push_16($col_count) {
  left: $base_60 * $col_count;
  @include position;
}


///////// pull value accounts for a full column in the grid ////////////
// -----------------------------------------------------------------------

@mixin pull_12($col_count) {
  right: $base_80 * $col_count;
  @include position;
}

@mixin pull_16($col_count) {
  right: $base_60 * $col_count;
  @include position;
}