SCSS mixin for various screen types

media.scss

@import "bourbon";

//Change the media breakpoints as you see fit
$mediaMobile: 600px;
$mediaTablet: 1080px;



@mixin responds-to($media: desktop) {
	//All screens greater than tablet size
	@if $media == desktop {
		@media only screen and (min-width: $mediaTablet + 1) { @content; }
	}

	//All screen less than or equal to tablet size
	@else if $media == touchscreen {
		@media only screen and (max-width: $mediaTablet) { @content; }
	}

	//All screens greater than mobile size, and less than or equal to tablet size
	@else if $media == tablet {
		@media only screen and (min-width: $mediaMobile + 1) and (max-width: $mediaTablet) { @content; }
	}

	//All screens greater than mobile size
	@else if $media == widescreen {
		@media only screen and (min-width: $mediaMobile + 1) { @content; }
	}

	//All screens less than or equal to mobile size
	@else if $media == mobile {
		@media only screen and (max-width: $mediaMobile) { @content; }
	}
}



//Example: only apply a certain padding on mobile and tablet sized screens
@include responds-to(touchscreen) {
  padding: 12px;
}

//Example: only display this item on tablets
@include responds-to(tablet) {
  display: block;
}