Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// Micro grid system

$grid-columns: 12;
$grid-gutter: 1rem;
 
$mq-breakpoint-small: 767px !default;
$mq-breakpoint-medium: 768px !default;
$mq-breakpoint-large: 1280px !default;
 
$mq: (
  small: "only screen and (max-width: #{$mq-breakpoint-small})",
  medium: "only screen and (min-width: #{$mq-breakpoint-medium})",
  large: "only screen and (min-width: #{$mq-breakpoint-large})"
) !default;

@mixin clearfix() {
  color: blue; }

@function grid-span(
    $span,
    $gutter: false,
    $grid: $grid-columns
) {
    $numerator: 1;
    $denominator: 1;

    @if type_of($span) == list {
        $numerator: nth($span, 1);
        $denominator: nth($span, 2);
    } @else if $span == auto or index(('%', 'px', 'em', 'rem'), unit($span)) {
        @return $span;
    } @else if round($span) == $span and unit($span) == '' and $span > 0 {
        $numerator: $span;
        $denominator: $grid;
    } @else {
        @return percentage($span);
    }

    @if $gutter {        
        @return calc(#{$numerator} * ((100% - #{$gutter * ($denominator - 1)}) / #{$denominator}) + (#{($numerator - 1) * $gutter}));
    } @else {
        @return percentage($numerator / $denominator);
    }
}
 
@mixin mq($breakpoint) {
  @if $breakpoint == all { 
    @content;
  } @else {
    @media #{(map-get($mq, $breakpoint))} {
      @content;
    }
  }
}
 
@each $breakpoint in (all, small, medium, large) {
  @include mq($breakpoint) {
    $suffix: if($breakpoint == all, '', '-#{$breakpoint}');
    
    @for $i from 1 through $grid-columns {
      %column-#{$i}#{$suffix}, .col-#{$i}#{$suffix} {
        width: grid-span($i);

        %columns-gutter > & {
          width: grid-span($i, $grid-gutter);
        }
      }
    }
  }
}

%column {
  display: block;
  float: left;

  %columns-gutter > &:not(:last-child) {
    margin-right: $grid-gutter;
  }
}

%row {
  @include clearfix();
  display: block;
  width: 100%;
  clear: left;
}

// EXPORTS

.row {
  @extend %row;
}

.cols-gutter {
  @extend %columns-gutter;
}

[class^="col-"], [class*=" col-"] {
  @extend %column;

  &.content {
    padding: 1rem;
  }
}

SassMeister-output.css

.col-1 {
  width: 8.33333%;
}
.cols-gutter > .col-1 {
  width: calc(1 * ((100% - 11rem) / 12) + (0rem));
}

.col-2 {
  width: 16.66667%;
}
.cols-gutter > .col-2 {
  width: calc(2 * ((100% - 11rem) / 12) + (1rem));
}

.col-3 {
  width: 25%;
}
.cols-gutter > .col-3 {
  width: calc(3 * ((100% - 11rem) / 12) + (2rem));
}

.col-4 {
  width: 33.33333%;
}
.cols-gutter > .col-4 {
  width: calc(4 * ((100% - 11rem) / 12) + (3rem));
}

.col-5 {
  width: 41.66667%;
}
.cols-gutter > .col-5 {
  width: calc(5 * ((100% - 11rem) / 12) + (4rem));
}

.col-6 {
  width: 50%;
}
.cols-gutter > .col-6 {
  width: calc(6 * ((100% - 11rem) / 12) + (5rem));
}

.col-7 {
  width: 58.33333%;
}
.cols-gutter > .col-7 {
  width: calc(7 * ((100% - 11rem) / 12) + (6rem));
}

.col-8 {
  width: 66.66667%;
}
.cols-gutter > .col-8 {
  width: calc(8 * ((100% - 11rem) / 12) + (7rem));
}

.col-9 {
  width: 75%;
}
.cols-gutter > .col-9 {
  width: calc(9 * ((100% - 11rem) / 12) + (8rem));
}

.col-10 {
  width: 83.33333%;
}
.cols-gutter > .col-10 {
  width: calc(10 * ((100% - 11rem) / 12) + (9rem));
}

.col-11 {
  width: 91.66667%;
}
.cols-gutter > .col-11 {
  width: calc(11 * ((100% - 11rem) / 12) + (10rem));
}

.col-12 {
  width: 100%;
}
.cols-gutter > .col-12 {
  width: calc(12 * ((100% - 11rem) / 12) + (11rem));
}

@media only screen and (max-width: 767px) {
  .col-1-small {
    width: 8.33333%;
  }
  .cols-gutter > .col-1-small {
    width: calc(1 * ((100% - 11rem) / 12) + (0rem));
  }

  .col-2-small {
    width: 16.66667%;
  }
  .cols-gutter > .col-2-small {
    width: calc(2 * ((100% - 11rem) / 12) + (1rem));
  }

  .col-3-small {
    width: 25%;
  }
  .cols-gutter > .col-3-small {
    width: calc(3 * ((100% - 11rem) / 12) + (2rem));
  }

  .col-4-small {
    width: 33.33333%;
  }
  .cols-gutter > .col-4-small {
    width: calc(4 * ((100% - 11rem) / 12) + (3rem));
  }

  .col-5-small {
    width: 41.66667%;
  }
  .cols-gutter > .col-5-small {
    width: calc(5 * ((100% - 11rem) / 12) + (4rem));
  }

  .col-6-small {
    width: 50%;
  }
  .cols-gutter > .col-6-small {
    width: calc(6 * ((100% - 11rem) / 12) + (5rem));
  }

  .col-7-small {
    width: 58.33333%;
  }
  .cols-gutter > .col-7-small {
    width: calc(7 * ((100% - 11rem) / 12) + (6rem));
  }

  .col-8-small {
    width: 66.66667%;
  }
  .cols-gutter > .col-8-small {
    width: calc(8 * ((100% - 11rem) / 12) + (7rem));
  }

  .col-9-small {
    width: 75%;
  }
  .cols-gutter > .col-9-small {
    width: calc(9 * ((100% - 11rem) / 12) + (8rem));
  }

  .col-10-small {
    width: 83.33333%;
  }
  .cols-gutter > .col-10-small {
    width: calc(10 * ((100% - 11rem) / 12) + (9rem));
  }

  .col-11-small {
    width: 91.66667%;
  }
  .cols-gutter > .col-11-small {
    width: calc(11 * ((100% - 11rem) / 12) + (10rem));
  }

  .col-12-small {
    width: 100%;
  }
  .cols-gutter > .col-12-small {
    width: calc(12 * ((100% - 11rem) / 12) + (11rem));
  }
}
@media only screen and (min-width: 768px) {
  .col-1-medium {
    width: 8.33333%;
  }
  .cols-gutter > .col-1-medium {
    width: calc(1 * ((100% - 11rem) / 12) + (0rem));
  }

  .col-2-medium {
    width: 16.66667%;
  }
  .cols-gutter > .col-2-medium {
    width: calc(2 * ((100% - 11rem) / 12) + (1rem));
  }

  .col-3-medium {
    width: 25%;
  }
  .cols-gutter > .col-3-medium {
    width: calc(3 * ((100% - 11rem) / 12) + (2rem));
  }

  .col-4-medium {
    width: 33.33333%;
  }
  .cols-gutter > .col-4-medium {
    width: calc(4 * ((100% - 11rem) / 12) + (3rem));
  }

  .col-5-medium {
    width: 41.66667%;
  }
  .cols-gutter > .col-5-medium {
    width: calc(5 * ((100% - 11rem) / 12) + (4rem));
  }

  .col-6-medium {
    width: 50%;
  }
  .cols-gutter > .col-6-medium {
    width: calc(6 * ((100% - 11rem) / 12) + (5rem));
  }

  .col-7-medium {
    width: 58.33333%;
  }
  .cols-gutter > .col-7-medium {
    width: calc(7 * ((100% - 11rem) / 12) + (6rem));
  }

  .col-8-medium {
    width: 66.66667%;
  }
  .cols-gutter > .col-8-medium {
    width: calc(8 * ((100% - 11rem) / 12) + (7rem));
  }

  .col-9-medium {
    width: 75%;
  }
  .cols-gutter > .col-9-medium {
    width: calc(9 * ((100% - 11rem) / 12) + (8rem));
  }

  .col-10-medium {
    width: 83.33333%;
  }
  .cols-gutter > .col-10-medium {
    width: calc(10 * ((100% - 11rem) / 12) + (9rem));
  }

  .col-11-medium {
    width: 91.66667%;
  }
  .cols-gutter > .col-11-medium {
    width: calc(11 * ((100% - 11rem) / 12) + (10rem));
  }

  .col-12-medium {
    width: 100%;
  }
  .cols-gutter > .col-12-medium {
    width: calc(12 * ((100% - 11rem) / 12) + (11rem));
  }
}
@media only screen and (min-width: 1280px) {
  .col-1-large {
    width: 8.33333%;
  }
  .cols-gutter > .col-1-large {
    width: calc(1 * ((100% - 11rem) / 12) + (0rem));
  }

  .col-2-large {
    width: 16.66667%;
  }
  .cols-gutter > .col-2-large {
    width: calc(2 * ((100% - 11rem) / 12) + (1rem));
  }

  .col-3-large {
    width: 25%;
  }
  .cols-gutter > .col-3-large {
    width: calc(3 * ((100% - 11rem) / 12) + (2rem));
  }

  .col-4-large {
    width: 33.33333%;
  }
  .cols-gutter > .col-4-large {
    width: calc(4 * ((100% - 11rem) / 12) + (3rem));
  }

  .col-5-large {
    width: 41.66667%;
  }
  .cols-gutter > .col-5-large {
    width: calc(5 * ((100% - 11rem) / 12) + (4rem));
  }

  .col-6-large {
    width: 50%;
  }
  .cols-gutter > .col-6-large {
    width: calc(6 * ((100% - 11rem) / 12) + (5rem));
  }

  .col-7-large {
    width: 58.33333%;
  }
  .cols-gutter > .col-7-large {
    width: calc(7 * ((100% - 11rem) / 12) + (6rem));
  }

  .col-8-large {
    width: 66.66667%;
  }
  .cols-gutter > .col-8-large {
    width: calc(8 * ((100% - 11rem) / 12) + (7rem));
  }

  .col-9-large {
    width: 75%;
  }
  .cols-gutter > .col-9-large {
    width: calc(9 * ((100% - 11rem) / 12) + (8rem));
  }

  .col-10-large {
    width: 83.33333%;
  }
  .cols-gutter > .col-10-large {
    width: calc(10 * ((100% - 11rem) / 12) + (9rem));
  }

  .col-11-large {
    width: 91.66667%;
  }
  .cols-gutter > .col-11-large {
    width: calc(11 * ((100% - 11rem) / 12) + (10rem));
  }

  .col-12-large {
    width: 100%;
  }
  .cols-gutter > .col-12-large {
    width: calc(12 * ((100% - 11rem) / 12) + (11rem));
  }
}
[class^="col-"], [class*=" col-"] {
  display: block;
  float: left;
}
.cols-gutter > [class^="col-"]:not(:last-child), .cols-gutter > [class*=" col-"]:not(:last-child) {
  margin-right: 1rem;
}

.row {
  color: blue;
  display: block;
  width: 100%;
  clear: left;
}

[class^="col-"].content, [class*=" col-"].content {
  padding: 1rem;
}