///
/// Generates column classes based on the defined breakpoints,
/// named with the convention `.col--x-y@breakpoint`, where
/// `x` is a subdivision of `y`.
///
/// @link http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/ Taking the BEM naming convention a step further
///
/// @param {Arglist}   $columns  - Grid divisions
///
/// @example scss - Dividing the grid in thirds and fourths
///  @include im-columns(3, 4);
///
///  /* Generates: */
///  .col-1-3@phone, .col-1-3@tablet, .col-1-3@deskop
///  .col-2-3@phone (...)
///

$im-columns-class: '.col' !default;

@mixin im-columns($columns...) {
  @each $i in $columns {
    @for $n from 1 through $i {
      #{$im-columns-class}--#{$n}-#{$i} {
        width: ($n / $i) * 100%;
      }
    }
  }
  
  @each $breakpoint in $breakpoints {
    $breakpoint-name: nth($breakpoint, 1);
    
    @include media(#{'>=' + $breakpoint-name}) {
      @each $i in $columns {
        @for $n from 1 through $i {
          #{$im-columns-class}--#{$n}-#{$i}\@#{$breakpoint-name} {
            width: ($n / $i) * 100%;
          }
        }
      }         
    }
  }
}