Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "include-media";

///
/// Generates grid classes based on the defined breakpoints,
/// named with the convention `.col--x-y@breakpoint`, where
/// `x` is a subdivision of `y`.
///
/// @param {List}   $columns  - Grid divisions
///
/// @example scss - Dividing the grid in thirds and fourths
///  @include im-make-grid((3, 4));
///  
///  /* Generates: */
///  .col-1-3@phone, .col-1-3@tablet, .col-1-3@deskop
///  .col-2-3@phone (...)
///
@mixin im-make-grid($columns) {
  [class*="col--"] {
    float: left;
  }
  
  @each $breakpoint in $breakpoints {
    $breakpoint-name: nth($breakpoint, 1);
    
    @include media('>=' + $breakpoint-name) {
      @each $i in $columns {
        @for $n from 1 through $i {
          .col--#{$n}-#{$i}\@#{$breakpoint-name} {
            width: ($n/$i) * 100%;  
         }
       }       
     }
    }
  }
}

@include im-make-grid((3, 4));

SassMeister-output.css

[class*="col--"] {
  float: left;
}

@media (min-width: 320px) {
  .col--1-3\@phone {
    width: 33.33333%;
  }
  .col--2-3\@phone {
    width: 66.66667%;
  }
  .col--3-3\@phone {
    width: 100%;
  }
  .col--1-4\@phone {
    width: 25%;
  }
  .col--2-4\@phone {
    width: 50%;
  }
  .col--3-4\@phone {
    width: 75%;
  }
  .col--4-4\@phone {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .col--1-3\@tablet {
    width: 33.33333%;
  }
  .col--2-3\@tablet {
    width: 66.66667%;
  }
  .col--3-3\@tablet {
    width: 100%;
  }
  .col--1-4\@tablet {
    width: 25%;
  }
  .col--2-4\@tablet {
    width: 50%;
  }
  .col--3-4\@tablet {
    width: 75%;
  }
  .col--4-4\@tablet {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .col--1-3\@desktop {
    width: 33.33333%;
  }
  .col--2-3\@desktop {
    width: 66.66667%;
  }
  .col--3-3\@desktop {
    width: 100%;
  }
  .col--1-4\@desktop {
    width: 25%;
  }
  .col--2-4\@desktop {
    width: 50%;
  }
  .col--3-4\@desktop {
    width: 75%;
  }
  .col--4-4\@desktop {
    width: 100%;
  }
}