Bootstrap Grid with SCSS Susy and Breakpoint

SassMeister-input-HTML.haml

%div.grid__container
  %div.grid__row
    %div.grid__col.grid__col--xs-2
      foo
    %div.grid__col.grid__col--xs-2
      foo
    %div.grid__col.grid__col--xs-4
      foo
    %div.grid__col.grid__col--xs-2
      foo
    %div.grid__col.grid__col--xs-2
      foo

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/*
 * Bootstrap like BEM Grid with SUSY
 *
 * depends:
 *  - susy
 *  - breakpoint
 */

@import "breakpoint";
@import "susy";

%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

$susy-namespace: grid;
$susy: (
  container: auto,
  columns: 12,
  gutters: 1,
  gutter-position: inside,
  global-box-sizing: border-box,
  debug: (
    image: show,
    color: rgba(blue, .125),
    output: background
  )
);

$breakpoints: (
  xs: 0,
  sm: 100,
  md: 200,
  lg: 300
);

@mixin build-grid () {
  .#{$susy-namespace} {
    &__container {
      @include container();
      
      @each $breakpoint, $value in $breakpoints {
        @if $breakpoint != 'xs' {
          @include susy-breakpoint($value) {
            max-width: #{$value}px;  
          }
        }
      }
    }
    
    &__row {
      @include bleed();
      @extend %clearfix;
      padding: 0;
    }
    
    @include build-columns();
  }
}

@mixin build-columns () {
  &__col {
    @include span(12);

    @each $breakpoint, $value in $breakpoints {    
      @if $breakpoint != 'xs' {
        @include susy-breakpoint($value) {
          @for $i from 1 through 12 {
            &--#{$breakpoint}-#{$i} {
              width: span($i);
            }
          }
        }
      } @else {
          @for $i from 1 through 12 {
            &--#{$breakpoint}-#{$i} {
              width: span($i);
            }
          }        
      }
    }
  }
}

@include global-box-sizing(border-box);
@include build-grid();

SassMeister-output.css

/*
 * Bootstrap like BEM Grid with SUSY
 *
 * depends:
 *  - susy
 *  - breakpoint
 */
.grid__row:after {
  content: "";
  display: table;
  clear: both;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.grid__container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(0, 0, 255, 0.125), rgba(77, 77, 255, 0.125));
  background-size: 8.33333%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.grid__container:after {
  content: " ";
  display: block;
  clear: both;
}

@media (min-width: 100) {
  .grid__container {
    max-width: 100px;
  }
}

@media (min-width: 200) {
  .grid__container {
    max-width: 200px;
  }
}

@media (min-width: 300) {
  .grid__container {
    max-width: 300px;
  }
}

.grid__row {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  margin-right: -2.08333%;
  margin-left: -2.08333%;
  padding-right: 4.16667%;
  padding-left: 4.16667%;
  padding: 0;
}

.grid__col {
  width: 100%;
  float: left;
  padding-left: 2.08333%;
  padding-right: 2.08333%;
}

.grid__col--xs-1 {
  width: 8.33333%;
}

.grid__col--xs-2 {
  width: 16.66667%;
}

.grid__col--xs-3 {
  width: 25%;
}

.grid__col--xs-4 {
  width: 33.33333%;
}

.grid__col--xs-5 {
  width: 41.66667%;
}

.grid__col--xs-6 {
  width: 50%;
}

.grid__col--xs-7 {
  width: 58.33333%;
}

.grid__col--xs-8 {
  width: 66.66667%;
}

.grid__col--xs-9 {
  width: 75%;
}

.grid__col--xs-10 {
  width: 83.33333%;
}

.grid__col--xs-11 {
  width: 91.66667%;
}

.grid__col--xs-12 {
  width: 100%;
}

@media (min-width: 100) {
  .grid__col--sm-1 {
    width: 8.33333%;
  }
  .grid__col--sm-2 {
    width: 16.66667%;
  }
  .grid__col--sm-3 {
    width: 25%;
  }
  .grid__col--sm-4 {
    width: 33.33333%;
  }
  .grid__col--sm-5 {
    width: 41.66667%;
  }
  .grid__col--sm-6 {
    width: 50%;
  }
  .grid__col--sm-7 {
    width: 58.33333%;
  }
  .grid__col--sm-8 {
    width: 66.66667%;
  }
  .grid__col--sm-9 {
    width: 75%;
  }
  .grid__col--sm-10 {
    width: 83.33333%;
  }
  .grid__col--sm-11 {
    width: 91.66667%;
  }
  .grid__col--sm-12 {
    width: 100%;
  }
}

@media (min-width: 200) {
  .grid__col--md-1 {
    width: 8.33333%;
  }
  .grid__col--md-2 {
    width: 16.66667%;
  }
  .grid__col--md-3 {
    width: 25%;
  }
  .grid__col--md-4 {
    width: 33.33333%;
  }
  .grid__col--md-5 {
    width: 41.66667%;
  }
  .grid__col--md-6 {
    width: 50%;
  }
  .grid__col--md-7 {
    width: 58.33333%;
  }
  .grid__col--md-8 {
    width: 66.66667%;
  }
  .grid__col--md-9 {
    width: 75%;
  }
  .grid__col--md-10 {
    width: 83.33333%;
  }
  .grid__col--md-11 {
    width: 91.66667%;
  }
  .grid__col--md-12 {
    width: 100%;
  }
}

@media (min-width: 300) {
  .grid__col--lg-1 {
    width: 8.33333%;
  }
  .grid__col--lg-2 {
    width: 16.66667%;
  }
  .grid__col--lg-3 {
    width: 25%;
  }
  .grid__col--lg-4 {
    width: 33.33333%;
  }
  .grid__col--lg-5 {
    width: 41.66667%;
  }
  .grid__col--lg-6 {
    width: 50%;
  }
  .grid__col--lg-7 {
    width: 58.33333%;
  }
  .grid__col--lg-8 {
    width: 66.66667%;
  }
  .grid__col--lg-9 {
    width: 75%;
  }
  .grid__col--lg-10 {
    width: 83.33333%;
  }
  .grid__col--lg-11 {
    width: 91.66667%;
  }
  .grid__col--lg-12 {
    width: 100%;
  }
}

SassMeister-rendered.html

<div class='grid__container'>
  <div class='grid__row'>
    <div class='grid__col grid__col--xs-2'>
      foo
    </div>
    <div class='grid__col grid__col--xs-2'>
      foo
    </div>
    <div class='grid__col grid__col--xs-4'>
      foo
    </div>
    <div class='grid__col grid__col--xs-2'>
      foo
    </div>
    <div class='grid__col grid__col--xs-2'>
      foo
    </div>
  </div>
</div>