SASS Responsive Mixin

gistfile1.txt

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

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

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

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

// Simple mixin that provides re-useable media queries.
@mixin use-query($query) {
  @media #{$query} {
		@content;
	}
}

// Pretty much an alias of use-query.
// Mixin provides compatability with older projects.
@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;
	}
}