Updated breakpoint mixin to account for multiple types of media queries in one.

_breakpoint.scss

@mixin bp($queries, $type: only screen) {
  $query-count: length($queries);
  $media-statement: "#{$type} and";
  @for $i from 1 through $query-count {
    $query: nth($queries, $i);
    $value: '';
    $key: '';
    @if length($query) == 1 or nth($query, 2) == up {
      $key: min-width;
      $value: if(map-has-key($bp, nth($query, 1)), px-em(map-get($bp, nth($query, 1))), px-em(nth($query, 1)));
    } @else {
      @if nth($query, 2) == down {
        $key: max-width;
        $value: if(map-has-key($bp, nth($query, 1)), px-em(map-get($bp, nth($query, 1)) - 1), px-em(nth($query, 1) - 1));
      } @else {
        $key: nth($query, 1);
        $value: nth($query, 2);
      }
    }
    $media-statement: if($i == 1, "#{$media-statement} (#{$key}: #{$value})", "#{$media-statement}, (#{$key}: #{$value})");
  }
  @media #{$media-statement} {
    @content;
  }
}

_functions.scss

@function px-em($px, $px-context: 16) {
  // Make sure it's a number
  @if(round($px)) {
    @return #{$px / $px-context}em;
  }
}

_variables.scss

$bp: (
  S: 320
  M: 768,
  L: 960
);