BEMIT Responsive Suffixes Column Mixins

_column.scss

@mixin generate-column($width: 1, $suffix: null) {
  $gutter: ($width - 1) * $size-gutter;
  $width-mod: null;
  @if ($width != 1) {
    $width-mod: --#{$width};
  }
  @if ($suffix != null) {
    $suffix: \@#{$suffix};
  }
  .l-column#{$width-mod}#{$suffix} {
    float: left;
    width: calc( (100% - #{$gutter}) / #{$width});
  }
}

@mixin column($width: null) {
  @include generate-column($width);
  $sizes: (
    'xs': $size-xs,
    'sm': $size-sm,
    'md': $size-md,
    'lg': $size-lg,
    'xl': $size-xl
  );

  @each $size in $sizes {
    @media(min-width: nth($size, 2)) {
      @include generate-column($width, nth($size, 1));
    }
  }
}

@for $i from 1 through 12 {
  @include column($i);
}