SASS 믹스인으로 미디어 쿼리를 작성하는 방법

웹사이트와 앱을 구축할 때 레이아웃이 반응하는지 확인하기 위해 종종 미디어 쿼리를 사용합니다. 이렇게 하면 제품에 액세스할 때 모든 사용자가 만족할 수 있도록 해야 하므로 액세스하는 수많은 장치에 맞게 적응할 수 있습니다.

CSS 미디어 쿼리

CSS에 대한 경험이 있다면 미디어 쿼리가 콘텐츠를 렌더링하고 조건에 맞게 조정할 수 있는 CSS3 모듈이라는 것을 알 것입니다. 예를 들어 화면 해상도와 같은:

@media (max-width: 599px) {
 font-size: 1rem;
}

여기에서는 뷰포트 크기가 <= 1rem 일 때 글꼴 크기를 599px로 설정했습니다.

이것은 충분히 간단하며 물론 완전히 반응하는 사이트를 갖기 위해서는 여러 미디어 쿼리가 필요합니다.

그러나 필연적으로 실제 중단점에 대한 규칙을 편집해야 할 때가 올 것이며 규칙 변경의 영향을 받는 모든 줄을 변경하기 위해 모든 코드를 검색하는 것은 이상적이지 않습니다. 더 나은 방법이 있어야합니다!

최신 레이아웃 사양은 지난 몇 년 동안 크게 개선되었으며 기본적으로 반응형입니다. 이를 통해 프로젝트에 필요한 미디어 쿼리의 양을 줄이고 더 깔끔한 코드를 만들 수 있습니다.

그러나 미디어 쿼리는 현대 웹 개발에서 여전히 자리를 잡고 있습니다. 그리고 프로젝트가 커짐에 따라 더 나은 관리 방법이 필요합니다.

SASS 믹스인을 입력하세요!

믹스인

우리가 알고 있듯이(참조) SASS 믹스인은 재사용 가능한 코드 덩어리를 생성할 수 있는 기능을 제공합니다. 즉, 반복을 줄이고 무미건조한 코드를 촉진하며 유지 관리를 용이하게 합니다.

따라서 스타일시트에 삽입할 믹스인으로 미디어 쿼리를 작성하는 것은 필요할 때마다 매우 합리적입니다!

이제 예를 살펴보겠습니다.

믹스인 설정

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

여기에서 5개의 공통 중단점을 @mixin 블록에 작성했습니다.
@content 구문은 모든 쿼리를 한 번에 작성하지 않을 가능성이 있으므로 나중에 콘텐츠 삽입을 허용하는 SASS의 지시어입니다.

믹스인 사용

모바일 장치에서 헤더 텍스트의 글꼴 크기를 줄이기 위해 믹스인을 사용하고 싶다고 가정해 보겠습니다.

다음과 같이 mixin(적절한 클래스 아래에 중첩됨)을 포함으로 추가합니다.

.header-title {  
   font-size: 2rem;  

   @include for-phone-only {    
      font-size: 1rem; 
   }
}

프로젝트를 컴파일할 때 @include는 다음과 같이 변환됩니다.

@media (max-width: 599px) {
   font-size: 1rem;
}

이제 프로젝트 전체에서 원하는 위치에 미디어 쿼리를 쉽게 삽입할 수 있습니다!

또한 미리 정의된 중단점을 기억할 필요가 없습니다. 변경해야 하는 경우 믹스인을 편집하기만 하면 됩니다.

믹스인을 설정하는 또 다른 방법

한 단계 더 나아가고 싶다면 조건을 사용하여 믹스인을 설정할 수 있습니다.

하나의 블록@mixin만 생성하고 전달될 매개변수를 설정합니다. 다음과 같이 중단점을 선택하는 데 사용합니다.

@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}

그런 다음 이러한 방식으로 믹스인을 사용하려면 다음과 같이 선택합니다.

.header-title {  
   font-size: 2rem;  

   @include for-size(phone-only) {    
      font-size: 1rem; 
   }
}

그렇게 간단합니다!

미디어 쿼리 작성은 골칫거리가 될 필요가 없으며 SASS 믹스인을 사용하면 미디어 쿼리를 관리할 수 있는 중앙 집중식 위치가 하나 생깁니다.

결론

이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here

🌎 연결하자

Portfolio

Hashnode

Medium

Github

Codepen