scss CSS：媒体查询

Posted 2021-05-18

// SASS:
@mixin media($media) {
	@if $media == small {
		@media only screen and (max-width: 899px) {
			@content;
		}
	}
	@else if $media == medium {
		@media only screen and (min-width: 900px) {
			@content;
		}
	}
	@else if $media == large {
		@media only screen and (min-width: 1200px) {
			@content;
		}
	}
}
// UZYCIE:
.container {
	margin: 0 auto;
	@include media(small) {
		width: 600px;
	}
	@include media(medium) {
		width: 900px;
	}
	@include media(large) {
		width: 1200px;
	}
}

// OUTPUT:
.container {
  margin: 0 auto;
}
  @media only screen and (max-width: 899px) {
    .container {
      width: 600px;
	}
  }
  @media only screen and (min-width: 900px) {
    .container {
      width: 900px;
	}
  }
  @media only screen and (min-width: 1200px) {
    .container {
      width: 1200px;
	}
  }