scss 针对各种屏幕尺寸的SASS断点声明

Posted 2021-05-18

// MEDIA QUERY RANGES
$x-small-range: (0, 27em) !default; // 432px - used only for checkout steps because of text wrapping
$small-range: (0, 47.49em) !default; // 759px
$medium-range: (47.5em, 59.99em) !default; // 760 - 959px
$large-range: (60em, 99999999em) !default; // 960px up
$screen: "only screen" !default;
$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;
$x-small-only: "#{$screen} and (max-width: #{upper-bound($x-small-range)})" !default;
$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
$medium-down: "#{$screen} and (max-width: #{upper-bound($medium-range)})" !default;
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;


// MIXIN DECLARATION
@function getMediaQuery($query) {
	$mediaQueries: (
			"x-small-only": $x-small-only,
			"small-up": $screen,
			"small-only": $small-only,
			"medium-down": $medium-down,
			"medium-up": $medium-up,
			"medium-only": $medium-only,
			"large-up": $large-up,
			"large-only": $large-only
	);
	@return map-get( $mediaQueries, $query );
}

@mixin media($size) {
	// If media queries are supported
	@if $supports-mq {
		$query: getMediaQuery($size);
		@media #{$query} {
			@content;
		}
	}
	@else {
		// check if we should apply these rules...
		@if $size == "small-up" or $size == "medium-up" or $size == "large-up" or $size == "large-only" {
			// ...output the content the user gave us.
			@content;
		}
	}
}

// RANGES
// We use these functions to define ranges for various things, like media queries.
@function lower-bound($range){
	@if length($range) <= 0 {
		@return 0;
	}
	@return nth($range,1);
}

@function upper-bound($range) {
	@if length($range) < 2 {
		@return 999999999999;
	}
	@return nth($range, 2);
}


// USAGE
@include media(medium-up){
  //...your css...//
}