scss Vanilla CSS媒体查询+ Sass媒体查询mixin

Posted 2021-05-18

//Basic list of media queries based on mobile-first approach:

@media only screen and (min-width:80em) {...} // 1280/16
@media only screen and (min-width:64em) {...} // 1024/16
@media only screen and (min-width:50em) {...} // 800/16
@media only screen and (min-width:48em) {...} // 768/16
@media only screen and (min-width:40em) {...} // 640/16
@media only screen and (min-width:30em) {...} // 480/16
@media only screen and (min-width:20em) {...} // 320/16
@media only screen and (min-width:17.5em) {...} // 280/16

/* 
  http://css-tricks.com/naming-media-queries/
  
  Usage:	
 	.selector {
 	  width: 25%;
 	  @include bp(S) {
 	    width: 100%;
 	  }
 	}
*/


@mixin bp($point) {
	@if $point == XL { // 1024/16
		@media (min-width: 64em) { @content; }
	}
	@else if $point == L { // 768/16
		@media (min-width: 48em) { @content; }
	}
	@else if $point == M { // 640/16
		@media (min-width: 40em)  { @content; }
	}
	@else if $point == S { // 480/16
		@media (min-width: 30em)  { @content; }
	}
	@else if $point == XS { // 320/16
		@media (min-width: 20em)  { @content; }
	}
}