SCSS에서 미디어 쿼리를 사용하는 방법은 일반 CSS와 비슷하지만, 좀 더 편리한 구문을 제공합니다. SCSS에서는 중첩된 규칙을 사용하여 미디어 쿼리를 정의할 수 있습니다. 이를 통해 코드를 더 읽기 쉽게 만들고 유지보수를 용이하게 할 수 있습니다.

SCSS의 변수와 믹스인(Variables & mixins)

변수 작성

모바일, 태블릿, 데스크톱 세 환경을 대응하도록 변수를 선언한다.

scss 파일명 앞에 언더바( _ )를 붙여서 작성해야 파일단위로 분리되어 컴파일되지 않습니다.

_var.scss

// Breakpoints
$breakpoint-mobile: 335px;
$breakpoint-tablet: 758px;
$breakpoint-desktop: 1024px;

믹스인 작성

미디어쿼리를 이용하기 쉽도록 믹스인으로 작성합니다.

_mixin.scss

@import "./variables";//작성한 변수를 불러와 import 해줍니다.

@mixin mobile {
  @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tablet - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$breakpoint-desktop}) {
    @content;
  }
}

예시

_main.scss

.item{
      display: flex;
      align-items: center;
      font-size: 1rem;
      @include mobile{//모바일 사이즈에서
                      display: flex;
                      flex-wrap: wrap;
                      }
      @include tablet{//태블릿 사이즈에서
                     display: flex;
                     flex-wrap: wrap;
                     }
     }