scss Bootstrap断点SASS mixin

Posted 2021-05-18

@mixin breakpoint($minWidth: 0, $maxWidth: 0, $minHeight: 0, $maxHeight: 0) {
  $type: type-of($minWidth);
	 
  @if $type == string {
  	$class: $minWidth; 

    @if $class == xs {
	    @media (max-width: 767px) { @content; }
	  }
	 
	  @else if $class == sm {
	    @media (min-width: 768px) { @content; }
	  }
	 
	  @else if $class == md {
	    @media (min-width: 992px) { @content; }
	  }
	 
	  @else if $class == lg {
	    @media (min-width: 1200px) { @content; }
	  }
	 
	  @else {
	    @warn "Breakpoint mixin supports: xs, sm, md, lg";
	  }
  }
  @else if $type == number {
	  $widthQuery: "all" !default;

	  // width
	  @if $minWidth != 0 and $maxWidth != 0 { 
	    $widthQuery: "(min-width: #{$minWidth}) and (max-width: #{$maxWidth})";
	  }
	  @else if $minWidth != 0 and $maxWidth == 0 { 
	    $widthQuery: "(min-width: #{$minWidth})"; 
	  }
	  @else if $minWidth == 0 and $maxWidth != 0 { 
	    $widthQuery: "(max-width: #{$maxWidth})"; 
	  }

	  // height
	  $heightQuery: 0;
	  @if $minHeight != 0 and $maxHeight != 0 { 
	    $heightQuery: "(min-height: #{$minHeight}) and (max-height: #{$maxHeight})";
	  }
	  @else if $minHeight != 0 and $maxHeight == 0 { 
	    $heightQuery: "(min-height: #{$minHeight})"; 
	  }
	  @else if $minHeight == 0 and $maxHeight != 0 { 
	    $heightQuery: "(max-height: #{$maxHeight})"; 
	  }

	  @if $minHeight != 0{
		  @media #{$widthQuery} and #{$heightQuery} { 
		    @content;
		  }
		}
	  @else if $maxHeight != 0{
		  @media #{$widthQuery} and #{$heightQuery} { 
		    @content;
		  }
	  }
	  @else if $minHeight != 0 and $maxHeight != 0{
		  @media #{$widthQuery} and #{$heightQuery} { 
		    @content;
		  }
	  }
	  @else {
		  @media #{$widthQuery} { 
		    @content;
		  }
		}

  }
}

// EXAMPLES:

//@include breakpoint($maxWidth: 700px, $minWidth: 500px, $maxHeight: 1500px, $minHeight: 600px){

// @include breakpoint($min: 400px, $max: 500px) {
// 	background-color: red;
// }

// aside.primary {
//   @include breakpoint(md) {
//     float: right;
//     width: 350px;
//   }
//   @include breakpoint(480px) {
//     display: none;
//   }
//   @include breakpoint($min: 640px, $max: 767px) {
//     text-align: center;
//     font-style: italic;
//   }
// }