Media query sass mixin helper

media.sass

$screen-xs-max: 480px
$screen-sm-min: 481px
$screen-sm-max: 960px
$screen-md-min: 961px
$screen-md-max: 1280px
$screen-lg-min: 1281px

@mixin xs($max-width: true)
	@if $max-width
		@media only screen and (max-width: $screen-xs-max)
			@content
	@else
		@media only screen and (min-width: $screen-xs-max + 1px)
			@content

@mixin sm($min-width: true, $max-width: true)
	@if $max-width and $min-width
		@media only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
			@content
	@else
		@if $min-width
			@media only screen and (min-width: $screen-sm-min)
				@content
		@else
			@media only screen and (max-width: $screen-sm-max)
				@content

@mixin md($min-width: true, $max-width: true)
	@if $max-width and $min-width
		@media only screen and (min-width: $screen-md-min) and (max-width: $screen-md-max)
			@content
	@else
		@if $min-width
			@media only screen and (min-width: $screen-md-min)
				@content
		@else
			@media only screen and (max-width: $screen-md-max)
				@content

@mixin lg($max-width: true)
	@media only screen and (min-width: $screen-lg-min)
		@content