Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$breakpoints: (
  sm: 30em,
  med: 50em,
  lrg: 80em
);

@mixin bp($bp) {
  @each $breakpoint, $value in $breakpoints {
    @if $breakpoint == $bp {
      @media screen and (min-width: $value) {
        @content;
      }
    }
  }
}

div {
  background-color: blue;
  
  @include bp(sm) {
    background-color: red;
  }
  
  @include bp(med) {
    background-color: green;
  }
  
  @include bp(lrg) {
    background-color: yellow;
  }
}

SassMeister-output.css

div {
  background-color: blue;
}
@media screen and (min-width: 30em) {
  div {
    background-color: red;
  }
}
@media screen and (min-width: 50em) {
  div {
    background-color: green;
  }
}
@media screen and (min-width: 80em) {
  div {
    background-color: yellow;
  }
}