[Breakpoints mixins]

breakpoints.scss

/**
	Breakpoints
 */
 
// define breakpoints
// ------------------------------
$breakpoints: (
	micro: 320px,
	xs: 502px,
	sm: 768px,
	md: 992px,
	lg: 1080px,
	xl: 1280px,
	xxl: 1620px
);

@mixin breakpoint($breakpoint: md){
  @if map-has-key($breakpoints, $breakpoint) {
	@media screen and (min-width: map_get($breakpoints, $breakpoint)) {
	  @content;
	}
  }
  @else {
	@media screen and (min-width: $breakpoint) {
	  @content;
	}
  }
}
@mixin breakpointUp($breakpoint: micro){

  @if map-has-key($breakpoints, $breakpoint) {
	@media screen and (max-width: map_get($breakpoints, $breakpoint)) {
	  @content;
	}
  }
  @else {
	@media screen and (max-width: $breakpoint) {
	  @content;
	}
  }
}