respond-to with multiple breakpoints and nice way to define them (in scss)

_respond-to.scss

@mixin respond-to($medias...) {
	$breakpoints-length: length($respond-to-breakpoints);
	
	@each $media in $medias {
		$had-a-hit: false;
		
		@for $i from 1 through $breakpoints-length {
			$breakpoint: nth($respond-to-breakpoints, $i);
			@if $media == nth($breakpoint, 1) {
				$definition: nth($breakpoint, 2);
				$had-a-hit: true;
				@media #{$definition} {
					@content;
				}
			}
		}
		
		@if $media == $respond-to-no-mediaqueries-fallback {
			.#{$respond-to-fallback-class} & {
				@content;
			}
		}
		
		@if $had-a-hit == false {
			@warn "Media #{media} not found!";
		}
	}
}

usage.scss

$respond-to-no-mediaqueries-fallback: desktop;
$respond-to-fallback-class: lt-ie9;
$respond-to-breakpoints: (
  desktop "(min-width: 721px)",
  pad "(min-width: 321px) and (max-width: 720px)",
  mobile "(max-width: 320px)"
);



@import "_respond-to";


.my-class {
  
  @include respond-to(desktop, pad) {
     color: #ff0;
  }
  
  @include respond-to(mobile) {
     color: #f0f;
  }
  
  font-size: 12px;

}

you need to delete the last comma after – mobile "(max-width: 320px)", – or you get an error

Updated to respect this.