Bootstrap 3 basic grid system in SCSS. Omits offsetting, nesting, and ordering for simplicity.

SASS Bootstrap 3 grid

// variables
$bp-small: em(768) !default;
$bp-medium: em(992) !default;
$bp-large: em(1200) !default;

$grid-columns: 12 !default;
$grid-gutter-width: em(30) !default;
$grid-wrapper-small: em(750) !default;
$grid-wrapper-medium: em(970) !default;
$grid-wrapper-large: em(1170) !default;

$layout-direction: left !default;

// mixins
@mixin clearfix {
  &:after {
    content:"";
    display:table;
    clear:both;
  }
}

@mixin grid-column($gutter-width, $column-size: false, $total-columns: false) {
  min-height: 1px;
  padding: {
    left: $gutter-width / 2;
    right: $gutter-width / 2
  }
  position: relative;

  @if $column-size {
    @if $total-columns {
      width: percentage($column-size / $total-columns);
    }
  }
}

// grid
.g-wrapper {
  margin: {
    right: auto;
    left: auto;
  }
  padding: {
    left: $grid-gutter-width / 2;
    right: $grid-gutter-width / 2;
  }
  @include clearfix;
}

.g-row {
  margin: {
    left: $grid-gutter-width / -2;
    right: $grid-gutter-width / -2;
  }
  @include clearfix;
}

%g-col {
  @include grid-column($grid-gutter-width);
}

%g-float {
  float: $layout-direction;
}

// setup base columns
@for $i from 1 through $grid-columns {
  .g-col-#{$i},
  .g-small-#{$i},
  .g-medium-#{$i},
  .g-large-#{$i} {
    @extend %g-col;
  }
}

// mobile first columns
@for $i from 1 through $grid-columns {
  .g-col-#{$i} {
    @extend %g-float;
  }
}

@for $i from 1 through $grid-columns {
  .g-col-#{$i} {
    width: percentage($i / $grid-columns);
  }
}

// breakpoint columns
@media (min-width: $bp-small) {
  %mq-float {
    float: $layout-direction;
  }

  .g-wrapper {
    max-width: $grid-wrapper-small;
  }

  @for $i from 1 through $grid-columns {
    .g-small-#{$i} {
      width: percentage($i / $grid-columns);
      @extend %mq-float;
    }
  }
}

@media (min-width: $bp-medium) {
  %mq-float {
    float: $layout-direction;
  }

  .g-wrapper {
    max-width: $grid-wrapper-medium;
  }

  @for $i from 1 through $grid-columns {
    .g-medium-#{$i} {
      width: percentage($i / $grid-columns);
      @extend %mq-float;
    }
  }
}

@media (min-width: $bp-large) {
  %mq-float {
    float: $layout-direction;
  }

  .g-wrapper {
    max-width: $grid-wrapper-large;
  }

  @for $i from 1 through $grid-columns {
    .g-large-#{$i} {
      width: percentage($i / $grid-columns);
      @extend %mq-float;
    }
  }
}