https://gist.github.com/machida/6603703 のscss版

grid.scss

// デバイスの一覧
$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
@mixin 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;
    }
  }
}

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

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

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

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

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

scssはかっこが多くて死ぬ

元 https://gist.github.com/machida/6603703