So Simple SCSS Grid

grid.scss

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

/* Media Queries */
$small:  480px;
$medium: 1024px;
$large:  1920px;

// TODO: Improve by accepting multiple $media
@mixin respond-to($media) {
  @if $media == 'small' {
    @media only screen and (max-width: $small) { @content; }
  }
  @else if $media == 'medium' {
    @media only screen and (min-width: $small + 1) and (max-width: $medium) { @content; }
  }
  @else if $media == 'large' {
    @media only screen and (min-width: $medium + 1) and (max-width: $large) { @content; }
  }
  @else if $media == 'huge' {
    @media only screen and (min-width: $large + 1) { @content; }
  }
}

/* Grid */
$cols:        12;
$colwidth:    100% / $cols;

[class*="lg"],
[class*="md"],
[class*="sm"] {
  float: left;
  .content {
    @include clearfix;
  }
}

@include respond-to(huge) {
  @for $i from 1 through $cols {
    .lg-#{$i}-#{$cols} {
        width: $i * $colwidth;
    }
    .push-lg-#{$i}-#{$cols} {
        margin-left: $i * $colwidth;
    }
  }
}

@include respond-to(large) {
  @for $i from 1 through $cols {
    .lg-#{$i}-#{$cols} {
        width: $i * $colwidth;
    }
    .push-lg-#{$i}-#{$cols} {
        margin-left: $i * $colwidth;
    }
  }
}

@include respond-to(medium) {
  @for $i from 1 through $cols {
    .md-#{$i}-#{$cols} {
        width: $i * $colwidth;
    }
    .push-md-#{$i}-#{$cols} {
        margin-left: $i * $colwidth;
    }
  }
}

@include respond-to(small) {
  @for $i from 1 through $cols {
    .sm-#{$i}-#{$cols} {
        width: $i * $colwidth;
        padding: 0 0.5em;
    }
    .push-sm-#{$i}-#{$cols} {
        margin-left: $i * $colwidth;
    }
  }
}