@mixin breakpoint

breakpoint.scss

@mixin breakpoint($size-or-width) {
	$merged-breakpoints: null;
	$max-width: null;
	$default-breakpoints:(
		XL: 2000px,
		L: 1250px,
		M: 950px,
		S: 650px,
		XS: 450px
	);
	

	@if global-variable-exists(breakpoints) {
		$merged-breakpoints: map-merge($default-breakpoints, $breakpoints);
	} 
	@else {
		$merged-breakpoints: $default-breakpoints;
	}

	
	@if type-of($size-or-width) == number {
		$max-width: $size-or-width;
	} 
	@else {
		@each $size, $width in $merged-breakpoints {
			@if $size-or-width == $size {
				$max-width: $width;
			}
		}
	}

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