Sass responsive grid system using recursive mixin.

input.scss

$grid-columns: 12;
$grid-gutter-width : 30px;

$container-xs : ((480px + $grid-gutter-width));
$container-sm : ((720px + $grid-gutter-width));
$container-md : ((940px + $grid-gutter-width));
$container-lg : ((1140px + $grid-gutter-width));

@mixin container-fixed($gutter: $grid-gutter-width) {
  margin-left: auto;
  margin-right: auto;
  padding-left: ($gutter / 2);
  padding-right: ($gutter / 2);
}

@mixin generate-columns($container-width, $number-cols, $i: 1){
  @if $i <= $number-cols {
    .grid__col--#{$i} {
      $single-width: $container-width / $number-cols;
      width: $i * $single-width;
    }
    @include generate-columns($container-width, $number-cols, $i + 1)
  }
}

@mixin make-grid($container-width) {
  @media (min-width: $container-width) {
    width: $container-width;
    @include generate-columns($container-width, $grid-columns);
  }
}

.container {
  @include container-fixed();
  [class*="col"]{
    float: left;
    width: 100%;
  }
  @include make-grid($container-xs);
  @include make-grid($container-sm);
  @include make-grid($container-md);
  @include make-grid($container-lg);
}

output.css

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.container [class*="col"] {
  float: left;
  width: 100%;
}
@media (min-width: 510px) {
  .container {
    width: 510px;
  }
  .container .grid__col--1 {
    width: 42.5px;
  }
  .container .grid__col--2 {
    width: 85px;
  }
  .container .grid__col--3 {
    width: 127.5px;
  }
  .container .grid__col--4 {
    width: 170px;
  }
  .container .grid__col--5 {
    width: 212.5px;
  }
  .container .grid__col--6 {
    width: 255px;
  }
  .container .grid__col--7 {
    width: 297.5px;
  }
  .container .grid__col--8 {
    width: 340px;
  }
  .container .grid__col--9 {
    width: 382.5px;
  }
  .container .grid__col--10 {
    width: 425px;
  }
  .container .grid__col--11 {
    width: 467.5px;
  }
  .container .grid__col--12 {
    width: 510px;
  }
}
@media (min-width: 750px) {
  .container {
    width: 750px;
  }
  .container .grid__col--1 {
    width: 62.5px;
  }
  .container .grid__col--2 {
    width: 125px;
  }
  .container .grid__col--3 {
    width: 187.5px;
  }
  .container .grid__col--4 {
    width: 250px;
  }
  .container .grid__col--5 {
    width: 312.5px;
  }
  .container .grid__col--6 {
    width: 375px;
  }
  .container .grid__col--7 {
    width: 437.5px;
  }
  .container .grid__col--8 {
    width: 500px;
  }
  .container .grid__col--9 {
    width: 562.5px;
  }
  .container .grid__col--10 {
    width: 625px;
  }
  .container .grid__col--11 {
    width: 687.5px;
  }
  .container .grid__col--12 {
    width: 750px;
  }
}
@media (min-width: 970px) {
  .container {
    width: 970px;
  }
  .container .grid__col--1 {
    width: 80.83333px;
  }
  .container .grid__col--2 {
    width: 161.66667px;
  }
  .container .grid__col--3 {
    width: 242.5px;
  }
  .container .grid__col--4 {
    width: 323.33333px;
  }
  .container .grid__col--5 {
    width: 404.16667px;
  }
  .container .grid__col--6 {
    width: 485px;
  }
  .container .grid__col--7 {
    width: 565.83333px;
  }
  .container .grid__col--8 {
    width: 646.66667px;
  }
  .container .grid__col--9 {
    width: 727.5px;
  }
  .container .grid__col--10 {
    width: 808.33333px;
  }
  .container .grid__col--11 {
    width: 889.16667px;
  }
  .container .grid__col--12 {
    width: 970px;
  }
}
@media (min-width: 1170px) {
  .container {
    width: 1170px;
  }
  .container .grid__col--1 {
    width: 97.5px;
  }
  .container .grid__col--2 {
    width: 195px;
  }
  .container .grid__col--3 {
    width: 292.5px;
  }
  .container .grid__col--4 {
    width: 390px;
  }
  .container .grid__col--5 {
    width: 487.5px;
  }
  .container .grid__col--6 {
    width: 585px;
  }
  .container .grid__col--7 {
    width: 682.5px;
  }
  .container .grid__col--8 {
    width: 780px;
  }
  .container .grid__col--9 {
    width: 877.5px;
  }
  .container .grid__col--10 {
    width: 975px;
  }
  .container .grid__col--11 {
    width: 1072.5px;
  }
  .container .grid__col--12 {
    width: 1170px;
  }
}