SCSS Breakpoint Mixin

mediaquery.scss

//-----------------------------------------
// Breakpoints
//-----------------------------------------
$desktop: 1440px;
$tablet: 960px;
$mobile: 600px;

//-----------------------------------------
// Media Query Mixin
//-----------------------------------------
@mixin media($point, $first: 'min') {

	@if $first == 'max' {
		$point: $point - 1;
	}

	@media screen and ( $first + '-width:' + $point ) { @content ; }
}

//-----------------------------------------
// Use
//-----------------------------------------
@include media($tablet) {
  margin-left: 0;
}
// or
@include media('max', $tablet) {
  margin-left: 0;
}

newmediaquery.scss

//--------------------------------------------------------------
// Media Query Mixin
//--------------------------------------------------------------

////
/// @group mixins
/// @author jomurgel
////

/// Easy mixin for media queries
///
/// @param {string} $min min width for breakpoint. Can be null.
/// @param {string} $max max width if applicable. Default null.
/// @param {string} $media default 'screen'.
/// @param {string} $orientation. default null. portrait, landscape, etc.
///
/// @example scss - Usage.
/// @mixin media($tablet-portrait) {
/// 	.test {}
/// }
///
/// @example css - Output
/// @media screen and (min-width: 600px) {
/// 	.test {}
/// }
/// @example scss - Usage 2.
/// @mixin media(null, $tablet-portrait) {
/// 	.test {}
/// }
///
/// @example css - Output 2
/// @media screen and (max-width: 600px) {
/// 	.test {}
/// }
/// @example scss - Usage 3.
/// @mixin media($desktop, $tablet-portrait, all, portrait) {
/// 	.test {}
/// }
///
/// @example css - Output 3
/// @media all and (min-width: 1200px) and (max-width: 600px) and (orientation: portrait) {
/// 	.test {}
/// }

@mixin media($min, $max: null, $media: 'screen', $orientation: null) {

	@if $orientation == null {

		@if $max == null and $min != null {
			@media #{$media} and (min-width: #{$min}) {
				@content;
			}
		} @else if $min == null and $max != null {
			@media #{$media} and (max-width: #{($max - 1)}) {
				@content;
			}
		} @else if $min == null and $max == null {
			@media #{$media} {
				@content;
			}
		} @else {
			@media #{$media} and (min-width: #{$min}) and (max-width: #{($max - 1)}) {
				@content;
			}
		}

	} @else {

		@if $max == null and $min != null {
			@media #{$media} and (min-width: #{$min}) and (orientation: #{$orientation}) {
				@content;
			}
		} @else if $min == null and $max != null {
			@media #{$media} and (max-width: #{($max - 1)}) and (orientation: #{$orientation}) {
				@content;
			}
		} @else if $min == null and $max == null and $orientation == null {
			@media #{$media} {
				@content;
			}
		} @else {
			@media #{$media} and (min-width: #{$min}) and (max-width: #{($max - 1)}) and (orientation: #{$orientation}) {
				@content;
			}
		}
	}
}