Sass/Scss Media Queries

반응 디자인이 당연해지는 시대에 미디어 조회는 매우 중요하다고 여겨진다.미디어 쿼리는 일반 단말기의 유형(프린터와 화면 등)이나 특정 특성(예를 들어 화면 해상도와 브라우저의 보기 포트 너비 등)에 따라 사이트와 응용을 수정할 수 있다.
그러나 CSS에서 미디어 조회의 쓰기가 불편하고 쓰기와 편집이 번거롭다.따라서 CSS의 확장은 SASS/SCSS에서 미디어 조회의 쓰기 방법을 소개합니다.
예제
.css

h3 { 
   color: red; 
   font-size: 1.4rem;
}

@media screen and (min-width: 768px) { 
   h3 { 
      color: blue; 
      font-size: 1.6rem;
   }
}

.scss

h3 {
    color: red;
    font-size: 1.4rem;
    
    @include media(md) {
	color: blue;
	font-size: 1.6rem;
    }
}

SASS/SCSS에서 메일 조회 쓰기

1. 메일 조회의 작성 방법 중 하나
1.scss

$breakpoints: (
    'sm': 'screen and (min-width: 576px)',
    'md': 'screen and (min-width: 768px)',
    'lg': 'screen and (min-width: 992px)',
    'xl': 'screen and (min-width: 1200px)',
) !default;

@mixin media($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}
h3 {
     color: black;
	
     @include media(sm) {
	color: blue
     }
}

상기 쓰기 컴파일 코드
compile1.css

h3 {
  color: black;
}
@media screen and (min-width: 576px) {
  h3 {
    color: blue;
  }
}

2. 메일 조회의 작성 방법 2
2.scss

@mixin responsive($propertyName, $defaultValue, $mediaQueries: ()) {
  #{$propertyName}: #{$defaultValue};

  @each $breakpoint, $value in $mediaQueries {
    @media (min-width: #{$breakpoint}) {
      #{$propertyName}: #{$value};
    }
  }
}
  
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

h3 {
  @include responsive(color, red, ($sm: blue, $md: green, $lg: black));
  }

상기 쓰기 컴파일 코드
compile2.css

h3 {
  color: red;
}
@media (min-width: 576px) {
  h3 {
    color: blue;
  }
}
@media (min-width: 768px) {
  h3 {
    color: green;
  }
}
@media (min-width: 992px) {
  h3 {
    color: black;
  }
}

위의 SASS/SCSS는 2개의 미디어 쿼리를 작성한 것입니다.1등을 사용했을 수도 있지만 2등은 코드가 짧아서 편리하지만 연기를 신경 쓰는 사람은 2등을 사용하지 않는 게 좋다.
참고 자료:
1. https://zenn.dev/web_tips/articles/095d7419507ca9
2. https://levelup.gitconnected.com/the-easier-way-to-write-media-queries-with-scss-mixin-c7c956150551
확장성
1.min-width/max-width 구분 사용
min-width: 스마트폰 우선 사용 시
max-width: PC 우선 순위
２.서류를 분리하는 것이 가장 좋다
예를 들면 다음과 같습니다.

├── scss    
     ├── _variables.scss      ＃変数 ($)、プレースホルダー（%）を定義
     ├── _mixin.scss          ＃関数管理 ( @mixin($引数){} )
     └── style.scss