Custom SCSS Mixins for Responsive CSS Modules

_mixins.scss

// Breakpoints
$bps: (
  s: 400px,
  m: 568px,
  l: 780px,
  xl: 1025px
);

// Mobile-first media query
@mixin media-from($start) {
  @media screen and (min-width: $start) {
    @content;
  }
}

// Modify declarations for each breakpoint
@mixin per-bp($base: true) {
  
  // Non-modified declaration?
  @if $base { @content; }
  
  // Per-breakpoint modifier
  @each $bp, $size in $bps {
    &--#{$bp} {
      @include media-from($bp) {
        @content;
      }
    }
  }
}

module.scss

.u-show {
  @include per-bp {
    display: block;
  }
}

output.css

.u-show { display: block; }

@media screen and (min-width: 400px)  { .u-show--s  { display: block; } }
@media screen and (min-width: 568px)  { .u-show--m  { display: block; } }
@media screen and (min-width: 780px)  { .u-show--l  { display: block; } }
@media screen and (min-width: 1025px) { .u-show--xl { display: block; } }