Grid Loop

gistfile1.txt

$columns: (
  small: 4,
  medium: 6,
  large: 12,
  xl: 12
);
$gutter: 20px;
$padding: $gutter;

$breakpoints: (
  small:  (null,   480px),  // default, no min-width. ("320" - 768px)
  medium: (481px,  768px),
  large:  (768px,  1160px),    // no max-width. Our max- container width covers that case
  xl: (1160px, null)
);

@mixin columns($num, $column-num) {
  float: left;
  width: percentage($num / $column-num);
  padding: 0 $gutter / 1.5;
}

@mixin offsetcolumns($num, $columns) {
  float: left;
  margin-left: percentage($num / $columns);
}

@mixin from-breakpoint($bp) {
  @if ($bp == 'small') {
    @content;
  }

  @else {
    @if map-has-key($breakpoints, $bp) {
      $list: map-get($breakpoints, $bp);
      $bp: nth($list, 1);
    }

    @media screen and (min-width: #{$bp + 1}) {
      @content;
    }
  }
}

@each $size, $count in $columns {
  @for $num from 1 through $count {
    @include from-breakpoint(#{$size}) {
      .#{$size}-#{$num} {
        @include columns($num, $count);
      }

      .offset-#{$size}-#{$num} {
        @include offsetcolumns($num, $count);
      }
    }

    @include at-breakpoint(#{$size}) {
      .hidden-#{$size} {
        display: none !important;
      }
    }
  }
}