scss EM中的Sass Breakpoints Mixin

Posted 2021-05-18

/*
  Used like this:
    @include breakpoint('mobile-up) {
       //Content Here
    } 
*/

// Breakpoints Map
$breakpoints: (
	'small'             : 'only screen and (max-width : 20em)',                                  // 0      < 320px
	'mobile'            : 'only screen and (min-width : 20.0625em) and (max-width : 47.9375em)', // 321px  < 767px
	'mobile-up'         : 'only screen and (min-width : 20.0625em)',                             // 321px  <
	'mobile-down'       : 'only screen and (max-width : 47.9375em)',                             // 0      < 767px
	'tablet'            : 'only screen and (min-width : 48em) and (max-width : 64em)',           // 768px  < 1024px
	'tablet-up'         : 'only screen and (min-width : 48em)',                                  // 768px  <
	'tablet-down'       : 'only screen and (max-width : 64em)',                                  // 0      < 1024px
	'tablet-desktop-sm' : 'only screen and (min-width : 48em) and (max-width : 74.9375em)',      // 768px  < 1199px
	'desktop-up'        : 'only screen and (min-width : 64.0625em)',                             // 1025px <
	'desktop-sm'        : 'only screen and (min-width : 64.0625em) and (max-width: 74.9375em)',  // 1025px < 1199px
	'desktop-lg-up'     : 'only screen and (min-width : 75em)',                                  // 1200px <

	'portrait'          : 'only screen and (max-width: 1023px) and (orientation : portrait)',
	'landscape'         : 'only screen and (orientation : landscape)',

	'retina'            : 'only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx)'
);

/**
 * Used to set media queries throughout the app. 
 * @param   {String}  $size  mobile, mobile-down, tablet, etc.
 */
@mixin breakpoint($size) { 
	@if $is-ie8-stylesheet {
		@if $size == 'desktop-up' or $size == 'desktop-lg-up' or $size == 'tablet-up' or $size == 'landscape' {
			@content;
		}
	} 
	@else {
		$mq: map-get($breakpoints, $size);
		@media #{$mq} { @content; }
	}
}