Generated by SassMeister.com.

SassMeister-input.scss

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

// all of the breakpoint names and values
// we may use this a lot, keep them somwhere safe
$breakpoints: (
  all: 0,
  xs: 24rem,
  sm: 40rem,
  md: 52rem,
  lg: 64rem,
);

// returns the apropriate media query
// for the given breakpoint name
@mixin media-query($breakpoint) {
  @if $breakpoint == 'all' {
    @content;
  } @else {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }
}

// generates a prefix based on the breakpoint
// name it is passed
@function breakpoint-prefix($breakpoint){
  $breakpoint-prefix: if($breakpoint != all, "#{$breakpoint}-", null);
  @return $breakpoint-prefix;
};

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  
  $breakpoint-prefix: breakpoint-prefix($breakpoint-name);
  
  @include media-query($breakpoint-name) {

        .#{$breakpoint-prefix}col-1 {
            width: percentage(1/12);
        }

        .#{$breakpoint-prefix}col-2 {
            width: percentage(2/12);
        }

        .#{$breakpoint-prefix}col-3 {
            width: percentage(3/12);
        }

        .#{$breakpoint-prefix}col-4 {
            width: percentage(4/12);
        }

        .#{$breakpoint-prefix}col-5 {
            width: percentage(5/12);
        }

        .#{$breakpoint-prefix}col-6 {
            width: percentage(6/12);
        }

        .#{$breakpoint-prefix}col-7 {
            width: percentage(7/12);
        }

        .#{$breakpoint-prefix}col-8 {
            width: percentage(8/12);
        }

        .#{$breakpoint-prefix}col-9 {
            width: percentage(9/12);
        }

        .#{$breakpoint-prefix}col-10 {
            width: percentage(10/12);
        }

        .#{$breakpoint-prefix}col-11 {
            width: percentage(11/12);
        }

        .#{$breakpoint-prefix}col-12 {
            width: percentage(12/12);
        }

        // Offsets

        .#{$breakpoint-prefix}offset-1 {
            margin-left: percentage(1/12);
        }

        .#{$breakpoint-prefix}offset-2 {
            margin-left: percentage(2/12);
        }

        .#{$breakpoint-prefix}offset-3 {
            margin-left: percentage(3/12);
        }

        .#{$breakpoint-prefix}offset-4 {
            margin-left: percentage(4/12);
        }

        .#{$breakpoint-prefix}offset-5 {
            margin-left: percentage(5/12);
        }

        .#{$breakpoint-prefix}offset-6 {
            margin-left: percentage(6/12);
        }

        .#{$breakpoint-prefix}offset-7 {
            margin-left: percentage(7/12);
        }

        .#{$breakpoint-prefix}offset-8 {
            margin-left: percentage(8/12);
        }

        .#{$breakpoint-prefix}offset-9 {
            margin-left: percentage(9/12);
        }

        .#{$breakpoint-prefix}offset-10 {
            margin-left: percentage(10/12);
        }

        .#{$breakpoint-prefix}offset-11 {
            margin-left: percentage(11/12);
        }
    }
}

SassMeister-output.css

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333%;
}

.col-5 {
  width: 41.66667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333%;
}

.col-8 {
  width: 66.66667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33333%;
}

.col-11 {
  width: 91.66667%;
}

.col-12 {
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333%;
}

.offset-2 {
  margin-left: 16.66667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333%;
}

.offset-5 {
  margin-left: 41.66667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333%;
}

.offset-8 {
  margin-left: 66.66667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333%;
}

.offset-11 {
  margin-left: 91.66667%;
}

@media (min-width: 24rem) {
  .xs-col-1 {
    width: 8.33333%;
  }

  .xs-col-2 {
    width: 16.66667%;
  }

  .xs-col-3 {
    width: 25%;
  }

  .xs-col-4 {
    width: 33.33333%;
  }

  .xs-col-5 {
    width: 41.66667%;
  }

  .xs-col-6 {
    width: 50%;
  }

  .xs-col-7 {
    width: 58.33333%;
  }

  .xs-col-8 {
    width: 66.66667%;
  }

  .xs-col-9 {
    width: 75%;
  }

  .xs-col-10 {
    width: 83.33333%;
  }

  .xs-col-11 {
    width: 91.66667%;
  }

  .xs-col-12 {
    width: 100%;
  }

  .xs-offset-1 {
    margin-left: 8.33333%;
  }

  .xs-offset-2 {
    margin-left: 16.66667%;
  }

  .xs-offset-3 {
    margin-left: 25%;
  }

  .xs-offset-4 {
    margin-left: 33.33333%;
  }

  .xs-offset-5 {
    margin-left: 41.66667%;
  }

  .xs-offset-6 {
    margin-left: 50%;
  }

  .xs-offset-7 {
    margin-left: 58.33333%;
  }

  .xs-offset-8 {
    margin-left: 66.66667%;
  }

  .xs-offset-9 {
    margin-left: 75%;
  }

  .xs-offset-10 {
    margin-left: 83.33333%;
  }

  .xs-offset-11 {
    margin-left: 91.66667%;
  }
}
@media (min-width: 40rem) {
  .sm-col-1 {
    width: 8.33333%;
  }

  .sm-col-2 {
    width: 16.66667%;
  }

  .sm-col-3 {
    width: 25%;
  }

  .sm-col-4 {
    width: 33.33333%;
  }

  .sm-col-5 {
    width: 41.66667%;
  }

  .sm-col-6 {
    width: 50%;
  }

  .sm-col-7 {
    width: 58.33333%;
  }

  .sm-col-8 {
    width: 66.66667%;
  }

  .sm-col-9 {
    width: 75%;
  }

  .sm-col-10 {
    width: 83.33333%;
  }

  .sm-col-11 {
    width: 91.66667%;
  }

  .sm-col-12 {
    width: 100%;
  }

  .sm-offset-1 {
    margin-left: 8.33333%;
  }

  .sm-offset-2 {
    margin-left: 16.66667%;
  }

  .sm-offset-3 {
    margin-left: 25%;
  }

  .sm-offset-4 {
    margin-left: 33.33333%;
  }

  .sm-offset-5 {
    margin-left: 41.66667%;
  }

  .sm-offset-6 {
    margin-left: 50%;
  }

  .sm-offset-7 {
    margin-left: 58.33333%;
  }

  .sm-offset-8 {
    margin-left: 66.66667%;
  }

  .sm-offset-9 {
    margin-left: 75%;
  }

  .sm-offset-10 {
    margin-left: 83.33333%;
  }

  .sm-offset-11 {
    margin-left: 91.66667%;
  }
}
@media (min-width: 52rem) {
  .md-col-1 {
    width: 8.33333%;
  }

  .md-col-2 {
    width: 16.66667%;
  }

  .md-col-3 {
    width: 25%;
  }

  .md-col-4 {
    width: 33.33333%;
  }

  .md-col-5 {
    width: 41.66667%;
  }

  .md-col-6 {
    width: 50%;
  }

  .md-col-7 {
    width: 58.33333%;
  }

  .md-col-8 {
    width: 66.66667%;
  }

  .md-col-9 {
    width: 75%;
  }

  .md-col-10 {
    width: 83.33333%;
  }

  .md-col-11 {
    width: 91.66667%;
  }

  .md-col-12 {
    width: 100%;
  }

  .md-offset-1 {
    margin-left: 8.33333%;
  }

  .md-offset-2 {
    margin-left: 16.66667%;
  }

  .md-offset-3 {
    margin-left: 25%;
  }

  .md-offset-4 {
    margin-left: 33.33333%;
  }

  .md-offset-5 {
    margin-left: 41.66667%;
  }

  .md-offset-6 {
    margin-left: 50%;
  }

  .md-offset-7 {
    margin-left: 58.33333%;
  }

  .md-offset-8 {
    margin-left: 66.66667%;
  }

  .md-offset-9 {
    margin-left: 75%;
  }

  .md-offset-10 {
    margin-left: 83.33333%;
  }

  .md-offset-11 {
    margin-left: 91.66667%;
  }
}
@media (min-width: 64rem) {
  .lg-col-1 {
    width: 8.33333%;
  }

  .lg-col-2 {
    width: 16.66667%;
  }

  .lg-col-3 {
    width: 25%;
  }

  .lg-col-4 {
    width: 33.33333%;
  }

  .lg-col-5 {
    width: 41.66667%;
  }

  .lg-col-6 {
    width: 50%;
  }

  .lg-col-7 {
    width: 58.33333%;
  }

  .lg-col-8 {
    width: 66.66667%;
  }

  .lg-col-9 {
    width: 75%;
  }

  .lg-col-10 {
    width: 83.33333%;
  }

  .lg-col-11 {
    width: 91.66667%;
  }

  .lg-col-12 {
    width: 100%;
  }

  .lg-offset-1 {
    margin-left: 8.33333%;
  }

  .lg-offset-2 {
    margin-left: 16.66667%;
  }

  .lg-offset-3 {
    margin-left: 25%;
  }

  .lg-offset-4 {
    margin-left: 33.33333%;
  }

  .lg-offset-5 {
    margin-left: 41.66667%;
  }

  .lg-offset-6 {
    margin-left: 50%;
  }

  .lg-offset-7 {
    margin-left: 58.33333%;
  }

  .lg-offset-8 {
    margin-left: 66.66667%;
  }

  .lg-offset-9 {
    margin-left: 75%;
  }

  .lg-offset-10 {
    margin-left: 83.33333%;
  }

  .lg-offset-11 {
    margin-left: 91.66667%;
  }
}