respond-to SASS mixin

by michaelburtonray

CSS

@mixin respond-to($media) {

	// Phone
	@if $media == mobile {
	@media (max-width: 768px) {
		@content; } }

	@if $media == phone {
	@media (max-width: 480px) {
		@content; } }

	// Tablet Portrait
	@if $media == tablet-portrait {
	@media (width: 768px) {
		@content; } }

	// Tablet Landscape
	@if $media == tablet-landscape {
	@media (width: 1024px) {
		@content; } }

	// Tablet Landscape - Desktop
	@if $media == tablet-landscape-desktop {
	@media (min-width: 768px) and (max-width: 979px) {
		@content; } }
	@if $media == desktop {
	@media (min-width: 769px) {
		@content; }}
	// Large Desktop
	@if $media == large-desktop {
	@media (min-width: 1200px) {
		@content; } }


	// Non-Retina
	@if $media == non-retina {
	@media screen and (-webkit-max-device-pixel-ratio: 1) {
		@content; } }
	// Retina Only
	@if $media == retina {
	@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
		@content; } }
}