SCSS: Media Queries

gistfile1.scss

// Using em for media queries 1em=16px
$break-small: 30em;
$break-large: 64em;
$debug: FALSE;

@mixin respond-to($media) {
	@if $media == handhelds {
		@media all and (max-width: $break-small) {
			@if $debug == TRUE {
				html, body {background-color: #ff0000;}
			}
			@content;
		}
	}
	@else if $media == medium-screens {
		@media all and (min-width: $break-small) and (max-width: $break-large) {
			@if $debug == TRUE {
				html, body {background-color: #0000ff;}
			}
			@content;
		}
	}
	@else if $media == wide-screens {
		@media all and (min-width: $break-large) {
			@if $debug == TRUE {
				html, body {background-color: #ff0000;}
			}
			@content;
		}
	}
}