Sass Media Queries for Progressive Enhancement

_queries.scss

/* These numbers are all arbitrary; feel free to tweak them to your liking/needs */
$mobileBreakpoint: 360px;
$tableBreakpoint: 720px;
$desktopBreakpoint: 1080px;

@mixin breakpoint($bp) {
	/* Use min-width for a progressive-enhancement approach */
	@media screen and (min-width: $bp) { @content }
}

@mixin mobile() { @include breakpoint($mobileBreakpoint); }
@mixin tablet() { @include breakpoint($tabletBreakpoint); }
@mixin desktop() { @include breakpoint($desktopBreakpoint); }

.custom-class {
	/* BASE STYLES */

	@include breakpoint(123px){/* CUSTOM BREAKPOINT STYLES */}
	
	@include mobile {/* Mobile Styles */}
	@include tablet {/* Tablet Styles */}
	@include desktop {/* Desktop Styles */}
}