Generated by SassMeister.com.

SassMeister-input.scss

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

$resolutions: (
    mobile: (
        name:               "mobile",
        shortName:          "m",
        baseFontSize:       13px,
        breakpointStart:    320px,
        divisions:          2,
        fluidWidth:         true
    ),
    phablet: (
        name:               "phablet",
        shortName:          "p",
        baseFontSize:       13px,
        breakpointStart:    520px,
        divisions:          4,
        fluidWidth:         true
    ),
    tablet: (
        name:               "tablet",
        shortName:          "t",
        baseFontSize:       13px,
        breakpointStart:    768px,
        divisions:          6,
        fluidWidth:         false
    )
);

$extender: false !default;

@function extender($class, $ext: $extender) {
    @if (bool($extender) == true) {
        @return (#{'%'}#{$class});
    } 
    
    @else {
        @return (#{'.'}#{$class}); 
    }
}

@mixin media($breakpoints...) {
    @each $breakpoint in $breakpoints {
        // Search through array for our resolution
        $breakpoint: to-lower-case(unquote($breakpoint));
        
        @for $i from 1 through length($resolutions) {
            // Meaningful var names extracted from array
            $resolution: nth(map-values($resolutions), $i); // Resolution map
            $breakpointName: map-get($resolution, name) !global;
            $baseFontSize: map-get($resolution, baseFontSize) !global;
            $breakpointStart: map-get($resolution, breakpointStart) !global;
            
            // If there is only one resolution in list
            @if (length($resolutions) == 1 and #{$breakpoint} == #{to-lower-case($breakpointName)}) {
              $breakpointEnd: 100% !global;
              $nextResolution: false !global;
              @content;
            }
            
            // First breakpoint doesn't have min-value, so use start of next breakpoint as max value
            @if (length($resolutions) > 1 and $i==1 and #{$breakpoint} == #{to-lower-case($breakpointName)}) {
                /* Breakpoint #{$i} - #{$breakpointName} */
                $nextResolution: nth(map-values($resolutions), $i+1);
                $breakpointEnd: map-get($nextResolution, breakpointStart) - 1px !global;
                
                @media (max-width: $breakpointEnd) {
                    @content;
                }
            }
        
            // Breakpoints in between have min and max values
            // Styles are encapsulated in these resolutions
            @if (length($resolutions) > 1 and $i > 1 and $i < length($resolutions) and #{$breakpoint} == #{to-lower-case($breakpointName)}) {
                /* Breakpoint #{$i} - #{$breakpointName} */
                $nextResolution: nth(map-values($resolutions), $i+1);
                $breakpointEnd: map-get($nextResolution, breakpointStart) - 1px !global;
               
                @media (min-width: $breakpointStart) and (max-width: $breakpointEnd) {
                    @content;
                }
            }
    
            // Last breakpoint doesn't have max value
            @if (length($resolutions) > 1 and $i > 1 and $i==length($resolutions) and #{$breakpoint} == #{to-lower-case($breakpointName)}) {
                /* Breakpoint #{$i} - #{$breakpointName} */
                $breakpointEnd: 100% !global;
                
                @media (min-width: $breakpointStart) {
                    @content;
                }
            }
        }
    }
}

// Slice columns
@mixin columns($columnDivisions, $shortName: 'part') {
    // Full width columns don't require any calculations
    #{extender(col)} {
        &.#{$shortName} {
            width: 100%;
        }
    }
    
    // Start slicing columns
    @for $x from 1 through $columnDivisions {
        @for $y from 2 through $columnDivisions {
            @if ($y > $x) {
                #{extender(col)} {
                    &.#{$shortName + '-' + $x + '-' + $y} {
                        width: ($x / $y) * 100%;
                    }
                }
            }
        }
    }
}

@mixin gridColumns() {
    @for $i from 1 through length($resolutions) {
        // Meaningful var names extracted from array
        $resolution: nth(map-values($resolutions), $i); // Resolution map
        $resolutionName: map-get($resolution, name);
        $divisions: map-get($resolution, divisions);
        $shortName: map-get($resolution, shortName);
        
        @include media($resolutionName) {
            @include columns($divisions, $shortName);
        }
    }
}

@include gridColumns();

SassMeister-output.css

/* Breakpoint 1 - mobile */
@media (max-width: 519px) {
  .col.m {
    width: 100%;
  }
  .col.m-1-2 {
    width: 50%;
  }
}

/* Breakpoint 2 - phablet */
@media (min-width: 520px) and (max-width: 767px) {
  .col.p {
    width: 100%;
  }
  .col.p-1-2 {
    width: 50%;
  }
  .col.p-1-3 {
    width: 33.33333%;
  }
  .col.p-1-4 {
    width: 25%;
  }
  .col.p-2-3 {
    width: 66.66667%;
  }
  .col.p-2-4 {
    width: 50%;
  }
  .col.p-3-4 {
    width: 75%;
  }
}

/* Breakpoint 3 - tablet */
@media (min-width: 768px) {
  .col.t {
    width: 100%;
  }
  .col.t-1-2 {
    width: 50%;
  }
  .col.t-1-3 {
    width: 33.33333%;
  }
  .col.t-1-4 {
    width: 25%;
  }
  .col.t-1-5 {
    width: 20%;
  }
  .col.t-1-6 {
    width: 16.66667%;
  }
  .col.t-2-3 {
    width: 66.66667%;
  }
  .col.t-2-4 {
    width: 50%;
  }
  .col.t-2-5 {
    width: 40%;
  }
  .col.t-2-6 {
    width: 33.33333%;
  }
  .col.t-3-4 {
    width: 75%;
  }
  .col.t-3-5 {
    width: 60%;
  }
  .col.t-3-6 {
    width: 50%;
  }
  .col.t-4-5 {
    width: 80%;
  }
  .col.t-4-6 {
    width: 66.66667%;
  }
  .col.t-5-6 {
    width: 83.33333%;
  }
}