Creating % Based Columns mapped to Breakpoints

_sass-columns.scss

// ------------------------------------------------
// Creating % Based Columns.
//
// @param {Map}     $breakpoints          - Mapping of breakpoint to # of columns
// @param {Number}  $breakpoint-override  - When mixin is included within a breakpoint
// @param {Number}  $gutter               - Provies spacing between the columns
//
// @requires  Must be included on the parent of the 'columns'.
//          'columns' is dependent on breakpoint()  ** https://gist.github.com/tommycoppers/06f71cf07686836395b9

@mixin columns ($breakpoints:('mobile':2, 'desktop':3), $breakpoint-override: false, $side-gutter: $spacing, $top-gutter: $spacing ) {
  @if not $breakpoint-override {

    // ___ Parent Styles ___
    @include breakpoint ( get-first($breakpoints, $filter: key) ){
      @include _columns-parent-styles($side-gutter, $top-gutter);
    }

    // ___ Column Styles ___
    & > * {
      @include breakpoint ( get-first($breakpoints, $filter: key) ){
        @include _columns-default-styles ($side-gutter, $top-gutter);
      }
      @each $bp, $col-num in $breakpoints {
        @include breakpoint ($bp){
          @include _columns-breakpoint-styles($col-num);
        }
      }
    }
  }

  @else {
    @include _columns-parent-styles($side-gutter, $top-gutter);
    & > * {
      @include _columns-default-styles ($side-gutter, $top-gutter);
      @include _columns-breakpoint-styles($breakpoint-override);
    }
  }
}

@mixin _columns-breakpoint-styles ($col-num) {
  width: (100/$col-num)*1%;
  &:nth-child(1n){
    clear: none;
  }
  &:nth-child(#{$col-num}n+1){
    clear: both;
  }
}

@mixin _columns-parent-styles ($side-gutter, $top-gutter) {
  @include clearfix;
  margin-top: -#{$top-gutter};
  margin-left: -#{$side-gutter};
}

@mixin _columns-default-styles ($side-gutter, $top-gutter) {
  float: left;
  padding-top: $top-gutter;
  padding-left: $side-gutter;
}