Generated by SassMeister.com.

SassMeister-input.scss

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

//breakpoint function, seems solid
@mixin media($breakpoint) {
  $queries: (
    xs: 24rem,
    sm: 40rem,
    md: 52rem,
    lg: 64rem,
  );
  
  @if $breakpoint == 'all' {
    @content;
  } @else {
    @media (min-width: #{map-get($queries, $breakpoint)}) {
      @content;
    }
  }
}

// putting groups of content into this mixin generates loads of unwanted code
@each $breakpoint in (all, xs, sm, md, lg) {
  $breakpoint-prefix: if($breakpoint != all, "#{$breakpoint}-", null);
  
  @include media($breakpoint) {
	  .#{$breakpoint-prefix}uses-breakpoints {
      width: percentage(1/12);
    }
    
    .does-not-use-breakpoints {
      display: block;
    }
	}
}

SassMeister-output.css

.uses-breakpoints {
  width: 8.33333%;
}

.does-not-use-breakpoints {
  display: block;
}

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

  .does-not-use-breakpoints {
    display: block;
  }
}
@media (min-width: 40rem) {
  .sm-uses-breakpoints {
    width: 8.33333%;
  }

  .does-not-use-breakpoints {
    display: block;
  }
}
@media (min-width: 52rem) {
  .md-uses-breakpoints {
    width: 8.33333%;
  }

  .does-not-use-breakpoints {
    display: block;
  }
}
@media (min-width: 64rem) {
  .lg-uses-breakpoints {
    width: 8.33333%;
  }

  .does-not-use-breakpoints {
    display: block;
  }
}