SASS mixin for handling media queries.

gistfile1.sass

$rwd-desktop: "only screen and (min-width: 1024px)";

$rwd-tablet-device: "only screen and (max-device-width: 980px)";
$rwd-mobile-device: "only screen and (max-device-width: 600px)";

$rwd-tablet: "only screen and (max-width: 980px)";
$rwd-tablet-only: "only screen and (min-width: 740px) and (max-width: 980px)";

$rwd-small-tablet: "only screen and (max-width: 740px)";
$rwd-small-tablet-only: "only screen and (min-width: 600px) and (max-width: 740px)";

$rwd-wide-mobile: "only screen and (max-width: 600px)";
$rwd-wide-mobile-only: "only screen and (min-width: 480px) and (max-width: 600px)";

$rwd-mobile: "only screen and (max-width: 479px)";

$nexus7: "only screen and (min-width:601px) and (device-width:601px) and (max-width:601px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:1.3312500715255737) and (device-aspect-ratio:601/906)";
$nexus7_hdpi: "only screen and (min-width: 600px) and (device-width: 600px) and (max-width: 600px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 25/38)";

@mixin use-query($query) {
	@media #{$query} {
		@content;
	}
}

@mixin responds-to($sizes, $and_below: false) {
	$query: "only screen";

	@if $sizes == "tablet" {
		@if $and_below {
			$query: $rwd-tablet;
		} @else {
			$query: $rwd-tablet-only;
		}
	}

	@if $sizes == "small-tablet" {
		@if $and_below {
			$query: $rwd-small-tablet;
		} @else {
			$query: $rwd-small-tablet-only;
		}
	}

	@if $sizes == "wide-mobile" {
		@if $and_below {
			$query: $rwd-wide-mobile;
		} @else {
			$query: $rwd-wide-mobile-only;
		}
	}

	@if $sizes == "mobile" {
		$query: $rwd-mobile;
	}

	@include use-query($query) {
		@content;
	}
}