おれおれ Grid System Mixin.

gridMixin.scss

//
// =================================
//
// #Layout Grid Mix-in.
//
// ##Params
//   * $unitClassName グリッドのclass名
//   * $maxCols       カラムの分割数
//   * $width         横幅
//   * $gap           カラムの隙間
//
// ##Useage
//
//````
//.gird {
//  @include gird( "unit", 12, 940px, 20px );
//}
//.f-gird {
//  @include gird( "unit", 4, 100%, 2% );
//}
//
//````
// =================================
//



@mixin grid( $unitClassName, $maxCols, $width, $gap) {
	$gap: percentage($gap / $width);
	%unit {
		@include box-sizing(border-box);
		@include pie-clearfix;
		float: left;

		> a:only-child img,
		> img:only-child {
			vertical-align: bottom;
		}
	}


	@include pie-clearfix;

	margin: 0 -#{$gap};
	$total: 100% + $gap * 2;
	width: $total;


	.#{$unitClassName} {
		@extend %unit;
		margin-left: $gap * 100% / $total;
		margin-bottom: $gap;
	}

	@for $cols from 2 through $maxCols {

		$baseColWidth: (100%  - $gap * ($cols - 1)) / $cols;

		@for $i from 1 through $cols {
			$colWidth: $baseColWidth * $i + $gap * (($i - 1) - 2 / $cols);
			.#{$unitClassName}_#{$i}of#{$cols} {
				width: #{$colWidth};
			}
		}

	}
}

.gird {
@include grid(".grid__unit", 940px, 20px, 12);
}

すると、こんなかんじに展開されます。960gs等のような、一番外側のmarginはありません。

.grid__unit {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left; 
}

.grid__unit > a:only-child img,
.grid__unit > img:only-child {
  vertical-align: bottom; 
}

.grid {
  margin-left: -20px;
  margin-bottom: 20px;
  *zoom: 1;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.grid__unit {
  margin-left: 20px;
}

.grid__unit_1of12 {
  width: 60px;
}

.grid__unit_2of12 {
  width: 140px;
}

.grid__unit_3of12 {
  width: 220px;
}

.grid__unit_4of12 {
  width: 300px;
}

.grid__unit_5of12 {
  width: 380px;
}

.grid__unit_6of12 {
  width: 460px;
}

.grid__unit_7of12 {
  width: 540px;
}

.grid__unit_8of12 {
  width: 620px;
}

.grid__unit_9of12 {
  width: 700px;
}

.grid__unit_10of12 {
  width: 780px;
}

.grid__unit_11of12 {
  width: 860px;
}

.grid__unit_12of12 {
  width: 940px;
}