SCSS Breakpoints Mixin

_breakpoints.scss

/**
* Breakpoint mixins
*/

$breakpoints: (
     mobile:       ( min:  300px, max:  479px ),
     mobile_ls:    ( min:  480px, max:  759px ),
     tablet:       ( min:  760px, max: 1023px ),
     tablet_ls:    ( min: 1024px, max: 1279px ),
     laptop:       ( min: 1280px, max: 1499px ),
     desktop:      ( min: 1500px, max: 1799px ),
     desktop_huge: ( min: 1800px, max: 3000px )
);

@mixin br($type){
     $breakpoint: map-get($breakpoints, $type);
     $min: map-get($breakpoint,'min');
     $max: map-get($breakpoint,'max');

     @media (min-width: $min) and (max-width: $max){
          @content;
     }
}

@mixin br_min($type){
     $breakpoint: map-get($breakpoints, $type);
     $min: map-get($breakpoint,'min');

     @media (min-width: $min){
          @content;
     }
}

@mixin br_max($type){
     $breakpoint: map-get($breakpoints, $type);
     $max: map-get($breakpoint,'max');

     @media (max-width: $max){
          @content;
     }
}


@mixin br_min_max($type_min, $type_max){
	$breakpoint_min: map-get($breakpoints, $type_min);
	$breakpoint_max: map-get($breakpoints, $type_max);
	$min: map-get($breakpoint_min,'min');
	$max: map-get($breakpoint_max,'max');

	@media (min-width: $min) and (max-width: $max){
		@content;
	}
}

/* Append the current breakpoint label to an empty div#debug */
@mixin mq_debug($objid: #debug, $prefix: 'Breakpoint: '){

	#{$objid} {
		@include position(fixed, null null 0 0);
		padding: 7px 15px 2px 10px;

		background: #FFF;

		border-top-right-radius: 8px;
		
		font: 8pt $f_arial;
		text-transform: uppercase;

		transition: all 0.1s;
		opacity: 0.9;
		&:hover {
			opacity: 1;
		}
	}

	#{$objid}:before {
		content: "#{$prefix}";
		font-style: italic;
		color: #666;
	}

	#{$objid}:after {
		font-weight: bold;
		color: red;
	}
	
	$keys: map_keys($breakpoints);
	@each $key in $keys {
		$breakpoint: map-get($breakpoints, $key);
		$min: map-get($breakpoint,'min');
		$max: map-get($breakpoint,'max');	

		@media (min-width: $min) and (max-width: $max){
			#{$objid}:after { content: "#{$key}"; }
		}		
	}
}


/** Print Media */
@mixin print($margin: 0.5cm){
	@page {
		margin: $margin;
	}
	@media print{
		@content;
	}
}