Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v2.0.0)
// ----

$cols: 4;
$mobile-first : false;

$bp-names: 'xs' 's' 'm' 'l' 'xl';
$bp-vals: 320px 568px 768px 1024px 1280px;

//these demonstrate the jeet mixins:
@mixin col($val){
  width: $val*100+unquote("%");
}
@mixin span($val){
  width: $val*100+unquote("%");
}
@mixin stack(){
  width: 100%;
  margin-right:0;
  margin-left:0;
}
//demonstarte over


//break point mixin
@mixin bp($size, $mobile-first : $mobile-first) {
  @if ($mobile-first == true ){
    @media only screen and (min-width: $size) { @content; }
  }
  @else{
    @media only screen and (max-width: $size) { @content; }
  }
}



$from: 1;
$to : $cols+1;

$lenght : length($bp-names);
$pos: $lenght;
$step : -1;

@if $mobile-first{
  $pos: 1;
  $step : +1;
}


//generate default classes like col-1-2 or span-1-4

@for $i from $from to $to {
  @for $j from $from to $to {
    @if $j > $i or $i == 1{
      .col-#{$i}-#{$j}{
          @include col($i/$j);
      }
      .span-#{$i}-#{$j}{
          @include span($i/$j);
      }
    }
  }
}

//generate stack on the end for priority over col and span

.stack {
  @include stack();
}

//looping through break point names and generate mediaqueries for classes like col-xs-1-2

@for $i from 1 through $lenght {

  $bp-name : nth($bp-names, $pos);
  
  @include bp(nth($bp-vals, $pos)) {   
    @for $i from $from to $to {
      @for $j from $from to $to {
        @if $j > $i or $i == 1{
          .col-#{$bp-name}-#{$i}-#{$j}{
              @include col($i/$j);
          }
          .span-#{$bp-name}-#{$i}-#{$j}{
              @include span($i/$j);
          }
          #{$bp-name}-last{
            margin-right: 0;
          }
          .stack-#{$bp-name}{
            @include stack;
          }
        }
      }
    }
  }
  $pos : $pos+$step;
}

SassMeister-output.css

.col-1-1 {
  width: 100%; }

.span-1-1 {
  width: 100%; }

.col-1-2 {
  width: 50%; }

.span-1-2 {
  width: 50%; }

.col-1-3 {
  width: 33.33333%; }

.span-1-3 {
  width: 33.33333%; }

.col-1-4 {
  width: 25%; }

.span-1-4 {
  width: 25%; }

.col-2-3 {
  width: 66.66667%; }

.span-2-3 {
  width: 66.66667%; }

.col-2-4 {
  width: 50%; }

.span-2-4 {
  width: 50%; }

.col-3-4 {
  width: 75%; }

.span-3-4 {
  width: 75%; }

.stack {
  width: 100%;
  margin-right: 0;
  margin-left: 0; }

@media only screen and (max-width: 1280px) {
  .col-xl-1-1 {
    width: 100%; }
  .span-xl-1-1 {
    width: 100%; }
  xl-last {
    margin-right: 0; }
  .stack-xl {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xl-1-2 {
    width: 50%; }
  .span-xl-1-2 {
    width: 50%; }
  xl-last {
    margin-right: 0; }
  .stack-xl {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xl-1-3 {
    width: 33.33333%; }
  .span-xl-1-3 {
    width: 33.33333%; }
  xl-last {
    margin-right: 0; }
  .stack-xl {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xl-1-4 {
    width: 25%; }
  .span-xl-1-4 {
    width: 25%; }
  xl-last {
    margin-right: 0; }
  .stack-xl {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xl-2-3 {
    width: 66.66667%; }
  .span-xl-2-3 {
    width: 66.66667%; }
  xl-last {
    margin-right: 0; }
  .stack-xl {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xl-2-4 {
    width: 50%; }
  .span-xl-2-4 {
    width: 50%; }
  xl-last {
    margin-right: 0; }
  .stack-xl {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xl-3-4 {
    width: 75%; }
  .span-xl-3-4 {
    width: 75%; }
  xl-last {
    margin-right: 0; }
  .stack-xl {
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }

@media only screen and (max-width: 1024px) {
  .col-l-1-1 {
    width: 100%; }
  .span-l-1-1 {
    width: 100%; }
  l-last {
    margin-right: 0; }
  .stack-l {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-l-1-2 {
    width: 50%; }
  .span-l-1-2 {
    width: 50%; }
  l-last {
    margin-right: 0; }
  .stack-l {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-l-1-3 {
    width: 33.33333%; }
  .span-l-1-3 {
    width: 33.33333%; }
  l-last {
    margin-right: 0; }
  .stack-l {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-l-1-4 {
    width: 25%; }
  .span-l-1-4 {
    width: 25%; }
  l-last {
    margin-right: 0; }
  .stack-l {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-l-2-3 {
    width: 66.66667%; }
  .span-l-2-3 {
    width: 66.66667%; }
  l-last {
    margin-right: 0; }
  .stack-l {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-l-2-4 {
    width: 50%; }
  .span-l-2-4 {
    width: 50%; }
  l-last {
    margin-right: 0; }
  .stack-l {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-l-3-4 {
    width: 75%; }
  .span-l-3-4 {
    width: 75%; }
  l-last {
    margin-right: 0; }
  .stack-l {
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }

@media only screen and (max-width: 768px) {
  .col-m-1-1 {
    width: 100%; }
  .span-m-1-1 {
    width: 100%; }
  m-last {
    margin-right: 0; }
  .stack-m {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-m-1-2 {
    width: 50%; }
  .span-m-1-2 {
    width: 50%; }
  m-last {
    margin-right: 0; }
  .stack-m {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-m-1-3 {
    width: 33.33333%; }
  .span-m-1-3 {
    width: 33.33333%; }
  m-last {
    margin-right: 0; }
  .stack-m {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-m-1-4 {
    width: 25%; }
  .span-m-1-4 {
    width: 25%; }
  m-last {
    margin-right: 0; }
  .stack-m {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-m-2-3 {
    width: 66.66667%; }
  .span-m-2-3 {
    width: 66.66667%; }
  m-last {
    margin-right: 0; }
  .stack-m {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-m-2-4 {
    width: 50%; }
  .span-m-2-4 {
    width: 50%; }
  m-last {
    margin-right: 0; }
  .stack-m {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-m-3-4 {
    width: 75%; }
  .span-m-3-4 {
    width: 75%; }
  m-last {
    margin-right: 0; }
  .stack-m {
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }

@media only screen and (max-width: 568px) {
  .col-s-1-1 {
    width: 100%; }
  .span-s-1-1 {
    width: 100%; }
  s-last {
    margin-right: 0; }
  .stack-s {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-s-1-2 {
    width: 50%; }
  .span-s-1-2 {
    width: 50%; }
  s-last {
    margin-right: 0; }
  .stack-s {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-s-1-3 {
    width: 33.33333%; }
  .span-s-1-3 {
    width: 33.33333%; }
  s-last {
    margin-right: 0; }
  .stack-s {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-s-1-4 {
    width: 25%; }
  .span-s-1-4 {
    width: 25%; }
  s-last {
    margin-right: 0; }
  .stack-s {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-s-2-3 {
    width: 66.66667%; }
  .span-s-2-3 {
    width: 66.66667%; }
  s-last {
    margin-right: 0; }
  .stack-s {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-s-2-4 {
    width: 50%; }
  .span-s-2-4 {
    width: 50%; }
  s-last {
    margin-right: 0; }
  .stack-s {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-s-3-4 {
    width: 75%; }
  .span-s-3-4 {
    width: 75%; }
  s-last {
    margin-right: 0; }
  .stack-s {
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }

@media only screen and (max-width: 320px) {
  .col-xs-1-1 {
    width: 100%; }
  .span-xs-1-1 {
    width: 100%; }
  xs-last {
    margin-right: 0; }
  .stack-xs {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xs-1-2 {
    width: 50%; }
  .span-xs-1-2 {
    width: 50%; }
  xs-last {
    margin-right: 0; }
  .stack-xs {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xs-1-3 {
    width: 33.33333%; }
  .span-xs-1-3 {
    width: 33.33333%; }
  xs-last {
    margin-right: 0; }
  .stack-xs {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xs-1-4 {
    width: 25%; }
  .span-xs-1-4 {
    width: 25%; }
  xs-last {
    margin-right: 0; }
  .stack-xs {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xs-2-3 {
    width: 66.66667%; }
  .span-xs-2-3 {
    width: 66.66667%; }
  xs-last {
    margin-right: 0; }
  .stack-xs {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xs-2-4 {
    width: 50%; }
  .span-xs-2-4 {
    width: 50%; }
  xs-last {
    margin-right: 0; }
  .stack-xs {
    width: 100%;
    margin-right: 0;
    margin-left: 0; }
  .col-xs-3-4 {
    width: 75%; }
  .span-xs-3-4 {
    width: 75%; }
  xs-last {
    margin-right: 0; }
  .stack-xs {
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }