Sass Media Query Mixin using Bootstrap Responsive Breakpoints

_media-query.scss

// Usage:
// 
// @include media-query(xs) {
//   // CSS for XS devices 
// }
// 
// @include media-query(sm, lg) {
//   // CSS for small through large devices 
// }

@mixin media-query($min, $max: false) {
	@if $max == false { $max: $min; }
	
	$breakpoints-min: (
		xs: false,
		sm: $screen-sm-min,
		md: $screen-md-min,
		lg: $screen-lg-min
	);
	
	$breakpoints-max: (
		xs: $screen-xs-max,
		sm: $screen-sm-max,
		md: $screen-md-max,
		lg: false
	);

	$expr: 'only screen ';
	
	$min-px: map-get($breakpoints-min, $min);
	@if $min-px != false { 
		$expr: "#{$expr} and (min-width: #{$min-px})";
	}
	
	$max-px: map-get($breakpoints-max, $max);
	@if $max-px != false { 
		$expr: "#{$expr} and (max-width: #{$max-px})";
	}
	
	@media #{$expr} {
		@content;
	}
}