Cacher is the code snippet organizer for pro developers

$grid-columns: 12;
$grid-gutter: 20px;

$grid-breakpoints: (
  xs: 480px,
  sm: 768px,
  md: 992px,
  lg: 1200px
);

.container::after {
  clear: both;
  content: '';
  display: block;
}

@mixin generate-grid-item($grid-num) {
  float: left;
  padding-left: ($grid-gutter / 2);
  padding-right: ($grid-gutter / 2);
  width: ($grid-num / $grid-columns * 100%);
  &:first-of-type { padding-left: 0; }
  &:last-of-type { padding-right: 0; }
}

@each $breakpoint-name, $breakpoint-size in $grid-breakpoints {
  @for $i from 1 through $grid-columns {
    $col-class-name: 'col-#{$breakpoint-name}-#{$i}';
    @if (index(map-keys($grid-breakpoints), $breakpoint-name) == 1) {
      .#{$col-class-name} {
        @include generate-grid-item($i);
        padding-left: 0;
        padding-right: 0;
      }
    } @else {
      @media screen and (min-width: $breakpoint-size) {
        .#{$col-class-name} {
          @include generate-grid-item($i);
        }
      }
    }
  }
}