SASS breakpoints mediaqueries mixin

SASS-breakpoints-mixin.scss

//------------------------------------------
//  Breakpoints and media queries mixin
//------------------------------------------
//
//  Usage:
//------------------------------------------
//
//  @include breakpoint($breakpoint, $query1) {
//   /* Styles */
//  }
//
//  $breakpoint: select the device type: bp-small, bp-medium, bp-large, bp-huge. Sizes should be defined in _variables.scss
//  $query1: select min or max width
//
//
//  Example:
//------------------------------------------
//
//  .hello {
//    color: red;
//      @include breakpoint(desktop, min) {
//      color:blue;
//    }
//  }
//
//
//  Returns:
//------------------------------------------
//
//  .hello { color: red; }
//  @media (min-width: 1200px) { .hello { color:blue; } }
//
//  Enjoy!
 
$screen-xs-min:		480px;
$screen-sm-min:		768px;
$screen-md-min:		992px;
$screen-lg-min:		1200px;
 
@mixin breakpoint($breakpoint, $query1: min) {
 
	@if $breakpoint == bp-small {
		@media (#{$query1}-width: $screen-xs-min) { @content; }
	}
	@else if $breakpoint == bp-medium {
		@media (#{$query1}-width: $screen-sm-min) { @content; }
	}
	@else if $breakpoint == bp-large {
		@media (#{$query1}-width: $screen-md-min) { @content; }
	}

	@else if $breakpoint == bp-huge {
		@media (#{$query1}-width: $screen-lg-min) { @content; }
	}
}