TwitterBootstrap のグリッドの実装を sass の機能を使って作った。

grid.sass

// デバイスの一覧
$xs: 767px !default
$sm: 768px !default
$md: 992px !default
$lg: 1200px !default

// デバイスの名前
$break-points: xs, sm, md, lg, xl

// namespace
$column-namespace: '.col-' !default
$column-offset-namespace: '-offset' !default

// グリッドの設定
$columns-count: 12 !default
$column-margin: 20px !default

// デバイスごとの media query
=break-points($break-point: xs)
  @if $break-point == xs
    @media only screen and (max-width: $xs)
      @content
  @else if $break-point == sm
    @media only screen and (min-width: $sm)
      @content
  @else if $break-point == md
    @media only screen and (min-width: $md)
      @content
  @else if $break-point == lg
    @media only screen and (min-width: $lg)
      @content

// カラムのラッパーの設定
=row
  // カラムのマージン分だけ両サイドにネガティブマージンを取る
  margin:
    left: ($column-margin / 2) * -1
    right: ($column-margin / 2) * -1
  min-height: 1px
  &:before,
  &:after
    display: table
    content: " "
  &:after
    clear: both

// カラムの基本設定
=column($number)
  width: 100 / $columns-count * $number * 1%
  min-height: 1px
  padding-left: ($column-margin / 2)
  padding-right: ($column-margin / 2)
  float: left
  +box-sizing(border-box)

// カラムをサイズごとに作る
@each $break-point in $break-points
  +break-points(#{$break-point})
    @for $i from 1 through $columns-count
      #{$column-namespace}#{$break-point}-#{$i}
        +column($i)

// オフセットカラムの基本設定
=column-offset($number)
  margin-left: 100 / $columns-count * $number * 1%

// オフセットカラムをサイズごとに作る
@each $break-point in $break-points
  +break-points(#{$break-point})
    @for $i from 1 through $columns-count
      #{$column-namespace}#{$break-point}#{$column-offset-namespace}-#{$i}
        +column-offset($i)

sassは3.2以上を使ってください