SASS mixin to generate breakpoints for a given style

breakpoints-v-1

// Breakpoint Variables
$xs-break:                  em(400px);
$sm-break:                  em(600px);
$md-break:                  em(800px);
$lg-break:                  em(1000px);
$xl-break:                  em(1200px);

// Size Suffixes
$xs-suffix:                 "-xs";
$sm-suffix:                 "-sm";
$md-suffix:                 "-md";
$lg-suffix:                 "-lg";
$xl-suffix:                 "-xl";

$breakpoint-map: (
  $xs-suffix:  $xs-break,
  $sm-suffix:  $sm-break,
  $md-suffix:  $md-break,
  $lg-suffix:  $lg-break,
  $xl-suffix:  $xl-break
);

@mixin breakpoint($suffix, $break) {
    @media (min-width: $break) {
        &#{$suffix} { @content; }
    }
}

@mixin breakpoints {
  @each $suffix, $break in $breakpoint-map {
    @include breakpoint($suffix, $break) { @content; }
  }
}

.hide {
  @include breakpoints {
    display: none;
  }
}

.show {
  @include breakpoints {
    display: block;
  }
}