A Pen by Stuart Trann.

index.html

<div>
  Media query test
</div>

SASS-media-query-mixin.markdown

SASS media query mixin

Allows for loose syntax media queries with predefined breakpoints or custom, on the fly ones. Defaults to only screen and min-width, allows for those to be overridden. Can be expanded more.

Sept. 11, 2013 - Updated to include chained media queries, ie:

@media only screen and (min-width: 500px) and (max-width: 600px){}

A Pen by Stuart Trann on CodePen.

License.

style.scss

@import "compass";
@mixin media-query(
	$query: ()
)
{
	$breakpoint: ();
	$media-type: only screen;
	$media-feature: ();
	$small0: 480px;
	$small1: 568px;
	$medium: 800px;
	$large0: 1044px;
	$large1: 1560px;

	@each $i in $query
	{
		// look for our pre-defined breakpoints

		@if type-of($i) == string
		{
			// from 0 - 480px (default styles):
				// iphone 4 portrait
				// iphone 5 portrait
				// galaxy s3 portrait

			@if $i == small0
			{
				// iphone 4 landscape

				$breakpoint: append($breakpoint, $small0);
			}
			@else if $i == small1
			{
				// iphone 5 landscape
				// galaxy s3 landscape
				// ipad 2/3 portrait
				// nexus 7 portrait

				$breakpoint: append($breakpoint, $small1);
			}
			@else if $i == medium
			{
				// ipad 2/3 landscape
				// nexus 7 landscape

				$breakpoint: append($breakpoint, $medium);
			}
			@else if $i == large0
			{
				// desktop ++

				$breakpoint: append($breakpoint, $large0);
			}
			@else if $i == large1
			{
				$breakpoint: append($breakpoint, $large1);
			}

			// look for media type

			@else if $i == all
				or $i == aural
				or $i == braille
				or $i == handheld
				or $i == print
				or $i == projection
				or $i == screen
				or $i == tty
				or $i == tv
				or $i == embossed
			{
				$media-type: $i;
			}

			// look for media feature

			@else if $i == width
				or $i == min-width
				or $i == max-width
				or $i == height
				or $i == min-height
				or $i == max-height
			{
				$media-feature: append($media-feature, $i);
			}
		}

		// look for custom breakpoint value

		@else if type-of($i) == number
		{
      			@if unit($i) == px or unit($i) == em or unit($i) == rem
      			{
				$breakpoint: append($breakpoint, $i);
      			}
		}
	}

	// check if $media-feature is empty, if so then set min-width as default

	@if length($media-feature) == 0
	{
		$media-feature: min-width;
	}

	// output the media query

	// check to see if max-width or height has been defined
	// if so, take 1px off the $breakpoint value
	// ie: 800px becomes 799px
	// this avoids media query overlap ie: min-width 800px & max-width 800px

	@if nth($media-feature, 1) == max-width or nth($media-feature, 1) == max-height
	{
		@media #{$media-type} and (nth($media-feature, 1): (nth($breakpoint, 1) - 1))
		{
			@content;
		}
	}

	// check to see if $media-feature has more than 1 value, if so then output
	// a chained media query. currently it only supports 2 queries

	@else if length($media-feature) > 1
	{
		@media #{$media-type} and (nth($media-feature, 1): nth($breakpoint, 1)) and (nth($media-feature, 2): nth($breakpoint, 2))
		{
			@content;
		}
	}

	// otherwise just output a regular media query

	@else
	{
		@media #{$media-type} and (nth($media-feature, 1): nth($breakpoint, 1))
		{
			@content;
		}
	}
}

// -------------------------------------------------------------------

html
{
  background: #333;
  padding-top: 20%;
  text-align: center;
}

div
{
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,.5);
  background-color: #888;
  color: #efefef;
  display: inline-block;
  padding: 20px;
  transition: background-color .5s ease-out;
  
  // test the media-query mixin

  @include media-query(max-width 300px)
  {
    background-color: purple;
  }
    
  @include media-query(small0)
  {
    background-color: red;
  }

  @include media-query(600px)
  {
    background-color: green;
  }

  @include media-query(min-width 650px max-width 900px)
  {
    background-color: teal;
  }
  
  @include media-query(large0)
  {
    background-color: orange;
  }

  @include media-query(tv 1920px)
  {
    background-color: black;
  }
}