Respond Mixin

respond.scss

/*---------------------------------------------------------------*\
  RESPONSIVE PROPERTY HANDLER
    handles the per-breakpoint property for mobile-first approach

    note: requires a key-less 'breakpoints' scss map
          e.g. $breakpoints: ( 320px, 760px, 1080px, 1280px );

    usage:
      @include respond((
        display: flex,
        margin: (2px, 3px, 4px, 5px),
        padding: (3rem, 4rem, 5rem, 6rem),
        flex: ("0 1 50%", null, (1 1 100%))
      ));
\*---------------------------------------------------------------*/

@mixin respond($args) {
  @each $propname, $propvalues in $args {
    @if( $propname != null ) {
      $value : unquote(#{nth($propvalues, 1)});
      #{$propname} : $value;
    }
  }
  @for $bp from 2 through length($breakpoints) {
    @media screen and (min-width: #{nth($breakpoints, $bp)}) {
      @each $propname, $propvalues in $args {
        @if $bp <= length($propvalues) {
          $value : unquote(#{nth($propvalues, $bp)});
          @if( $propname != null ) {
            #{$propname} : $value;
          }
        }
      }
    }
  }
}