SCSS Breakpoint mixin

_breakpoint.scss

/* ==========================================================================
   Media Query Mixins
   ========================================================================== */
   
   
/* Custom Breakpoints collection
   ========================================================================== */
   
$breakpoints: (xs, sm, md, lg);

/* Screen size overwrites (by default equal to Bootstrap's defaults) */
$screen-xs-min: 480px; // iPad Mini
$screen-sm-min: 768px; // iPad
$screen-md-min: 992px; // Small desktop (like 1024x768ish)
$screen-lg-min: 1200px; // Full desktop

/**
 * @TODO: Use SASS Maps instead
 */
$breakpoint-widths: ($screen-xs-min, $screen-sm-min, $screen-md-min, $screen-lg-min);

/**
 * Breakpoint mixin loops through all of the breakpoints (set in the
 * ui/variables file) and creates an easier way to set styles for them.
 */
@mixin breakpoint($breakpoint) {

	/* Get the index of the breakpoint in the list */
	$i: index($breakpoints, $breakpoint);

	/* Get the width of specific breakpoint */
	$breakpoint-width: nth($breakpoint-widths, $i);

	/* Create media query */
	@media (min-width:#{$breakpoint-width}) {
		@content;
	}
}