SCSS Mixin for creating media queries when needed. Supports lists as a parameter for use with multiple media queries.

_respond-to.scss

/**
 * Supports lists as a parameter for use when you want to select multiple media queries.
 * @include respond-to(palm, phablet, lap) { .sub-nav { display: none; }}
 */

@mixin respond-to($media...) {
	$response-count: 0;
	$query: '';

	@each $medium in $media {
		@if $response-count > 0 {
			$query: $query + ', ';
		}
		@if $medium == 'palm' {
			$query: $query + '(max-width: 525px)';
		}
		@if $medium == 'phablet' {
			$query: $query + '(min-width: 526px) and (max-width: 759px)';
		}
		@if $medium == 'lap' {
			$query: $query + '(min-width: 760px) and (max-width: 990px)';
		}
		@if $medium == 'desk' {
			$query: $query + '(min-width: 991px) and (max-width: 1247px)';
		}
		@if $medium == 'wide' {
			$query: $query + '(min-width: 1248px)';
		}
		@if $medium == 'height' {
			$query: $query + '(min-height: 576px)';
		}

		$response-count: $response-count + 1;
	}


	@media only screen and #{$query} {
		@content;
	}
}