Mixins for generating a grid

grid-mixins.scss

$viewport-xs: 30em;
$viewport-sm: 40em;
$viewport-md: 60em;
$viewport-lg: 75em;

$xs: 'xs';
$sm: 'sm';
$md: 'md';
$lg: 'lg';

$modifier-delimiter: '-';
$step-delimiter: '-';

$sizes: #{$xs}, #{$sm}, #{$md}, #{$lg};
$queries: #{$viewport-xs}, #{$viewport-sm}, #{$viewport-md}, #{$viewport-lg};

@mixin queries($queries: $queries) {
  @each $query in $queries {
    @media screen and (min-width: #{$query}) {
      @content
    }
  }
}

@mixin breakpoints($selector, $columns: 0, $queries: $queries) {
  @each $size in $sizes {
    @if ($columns  > 0 ) {
      @for $i from 1 through $columns {
        #{$selector}#{$modifier-delimiter}#{$size}#{$step-delimiter}#{$i} {
          @include queries($queries) {
            @content
          }
        }
      }
    } @else {
      #{$selector}#{$modifier-delimiter}#{$size} {
        @include queries($queries) {
          @content
        }
      }
    }
  }
}