scss 命名媒体查询Mixin

Posted 2021-05-18

// MEDIA QUERIES
// 	Created by = Ricardo Zea
// 	Date = September 2014
// 	Usage:
// 	.selector {
// 	  width: 25%;
// 	  @include minw(641) {
// 	    width: 100%;
// 	  }
// 	}

//Mobile First
@mixin minw($point) {
	@if $point == 321 {
		@media (min-width: 20.06em) { @content; }
	}
	@else if $point == 401 {
		@media (min-width: 25.06em) { @content; }
	}
	@else if $point == 481 {
		@media (min-width: 30.06em) { @content; }
	}
	@else if $point == 521 {
		@media (min-width: 32.56em) { @content; }
	}
	@else if $point == 581 {
		@media (min-width: 36.31em) { @content; }
	}
	@else if $point == 601 {
		@media (min-width: 37.56em) { @content; }
	}
	@else if $point == 641 {
		@media (min-width: 40.06em) { @content; }
	}
	@else if $point == 701 {
		@media (min-width: 43.81em) { @content; }
	}
	@else if $point == 769 {
		@media (min-width: 48.06em) { @content; }
	}
	@else if $point == 801 {
		@media (min-width: 50.06em) { @content; }
	}
	@else if $point == 901 {
		@media (min-width: 56.31em) { @content; }
	}
	@else if $point == 961 {
		@media (min-width: 60.06em) { @content; }
	}
	@else if $point == 1001 {
		@media (min-width: 62.56em) { @content; }
	}
	@else if $point == 1141 {
		@media (min-width: 71.31em) { @content; }
	}
}

//Responsive
@mixin maxw($point) {
	@if $point == 1140 {
		@media (max-width: 76.125em) { @content; }
	}
	@else if $point == 1000 {
		@media (max-width: 62.5em) { @content; }
	}
	@else if $point == 960 {
		@media (max-width: 60em) { @content; }
	}
	@else if $point == 900 {
		@media (max-width: 56.25em) { @content; }
	}
	@else if $point == 800 {
		@media (max-width: 50em) { @content; }
	}
	@else if $point == 768 {
		@media (max-width: 48em) { @content; }
	}
	@else if $point == 700 {
		@media (max-width: 43.75em) { @content; }
	}
	@else if $point == 640 {
		@media (max-width: 40em) { @content; }
	}
	@else if $point == 600{
		@media (max-width: 37.5em) { @content; }
	}
	@else if $point == 580 {
		@media (max-width: 36.25em) { @content; }
	}
	@else if $point == 520 {
		@media (max-width: 32.5em) { @content; }
	}
	@else if $point == 480 {
		@media (max-width: 30em) { @content; }
	}
	@else if $point == 400 {
		@media (max-width: 25em) { @content; }
	}
	@else if $point == 320 {
		@media (max-width: 20em) { @content; }
	}
}