Easy Media Queries and Breakpoints in SASS

Media Query Mixin in SASS

/*------------------------------------
    $MEDIA QUERIES
------------------------------------*/
/*
- small:   	600px	37.5em
- medium: 	760px	47.5em
- large: 	1024px	64em
- xlarge: 	1260px	78.75em
*/


$mq-list: 	"small"		"(min-width:37.5em)",
		"medium"	"(min-width:47.5em)",
		"large"		"(min-width:64em)",
		"xlarge"	"(min-width:78.75em)";


@mixin mq($breakpoint)
{
	@each $mq in $mq-list
	{
		$mq-name: 	nth($mq, 1);
		$mq-param: 	nth($mq, 2);

		@if (unquote($breakpoint) == $mq-name)
		{
			@media only screen and #{$mq-param}
			{
				@content;
			}
		}
	}
}