Generated by SassMeister.com.

SassMeister-input.scss

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

//Generate Breakpoint Prefixes

// 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: "#{$breakpoint}-";
  $breakpoint-prefix: if($breakpoint != all, "#{$breakpoint}-", "x");
  @return $breakpoint-prefix;
};

@mixin breakpoint-iterate {
 @each $breakpoint-name, $breakpoint-value in $breakpoints {
   $breakpoint-prefix: breakpoint-prefix($breakpoint-name);
   
   @include media-query($breakpoint-name){
     
     // Columns
     .#{$breakpoint-prefix} {
       @content;
     }
   }
 }
}

@include breakpoint-iterate {
  &col-1 {
    width: percentage(1/12);
  }
  
  &col-2 {
    width: percentage(2/12);
  }
}

SassMeister-output.css

.xcol-1 {
  width: 8.33333%;
}
.xcol-2 {
  width: 16.66667%;
}

@media (min-width: 24rem) {
  .xs-col-1 {
    width: 8.33333%;
  }
  .xs-col-2 {
    width: 16.66667%;
  }
}
@media (min-width: 40rem) {
  .sm-col-1 {
    width: 8.33333%;
  }
  .sm-col-2 {
    width: 16.66667%;
  }
}
@media (min-width: 52rem) {
  .md-col-1 {
    width: 8.33333%;
  }
  .md-col-2 {
    width: 16.66667%;
  }
}
@media (min-width: 64rem) {
  .lg-col-1 {
    width: 8.33333%;
  }
  .lg-col-2 {
    width: 16.66667%;
  }
}