Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class='color'></div>
<div class='color-dark'></div>
<div class='color-darker'></div>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// Bourbon (v4.2.3)
// Neat (v1.6.0)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

$mobile: min-width 320px max-width 720px;
$custom: max-width 720px;
$blah: min-width 320px max-width 720px;

$queries: (
  query: ('feature': null,'value': null)
);

@mixin multiplemedia($queries...) {
  @each $query in $queries {
    $loop-to: length($query);
    $media-query: "screen and ";
    
    $i: 1;
    @while $i <= $loop-to {
      $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";

      @if ($i + 1) != $loop-to {
        $media-query: $media-query + "and ";
      }

      $i: $i + 2;
    }
    @media #{$media-query} {
      @content;
    }
  }
  
  
}

.foo {
  @include multiplemedia($mobile, $custom, $blah) {
    font-size: 20px;
  };
}
//example usage
// .foo {
//   @include multiplemedia($mobile, $custom) {
//     font-size: 20px; 
//   }
// }

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (min-width: 320px) and (max-width: 720px) {
  .foo {
    font-size: 20px;
  }
}
@media screen and (max-width: 720px) {
  .foo {
    font-size: 20px;
  }
}
@media screen and (min-width: 320px) and (max-width: 720px) {
  .foo {
    font-size: 20px;
  }
}

SassMeister-rendered.html

<div class='color'></div>
<div class='color-dark'></div>
<div class='color-darker'></div>