[SCSS] 반응형 미디어쿼리 mixin을 이용해서 조금 더 쉽게 사용하기

by

두 파일을 만들어서 한 파일에는 반응형 기준을 저장하고, 다른 한 파일에서는 import로 불러와서 사용하는 방식이다.

// _responsive.scss

/*반응형 화면 크기*/
$tablet: 1024px;
$desktop: 1600px;

// 크기가 tablet 이하
@mixin mobile{
      @media (max-width: $tablet){
            @content;
      }
}
// 크기가 tablet+1 이상, desktop 이하
@mixin tablet{
      @media (min-width: ($tablet + 1)) and (max-width: $desktop){
            @content;
      }
}
// 크기가 desktop 이상
@mixin desktop{
      @media (min-width: $desktop){
            @content;
      }
}

// 사용할 scss

@import './responsive'; // 위 파일 import

@include mobile{
      color: yellow;
}
@include tablet{
      color: black;
}
@include desktop{
      color: red;
}

Leave a Comment