scss에서의 media query 적용하기

졸업 프로젝트에서 반응형 웹사이트를 만들 때 Css에 media query를 적용했던 적이 있다.

새로운 프로젝트를 시작하면서부터는 scss를 사용하고 있는데, 이 scss 에서 media query를 적용하는 방법을 알아보자.

 

_variables.scss

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

Scss 에서는 css와 달리 변수 사용이 가능하다.

“_variables.scss” 파일을 만들고 변수로 breakpoint를 선언해준다.

변수를 저장할 파일이기 때문에 언더바 “_” 로 파일명을 시작한다.(언더바로 시작하는 파일은 파일 단위로 분리되어 컴파일 되지 않는다.)

 

mixin.scss

@import "./_variables.scss";

@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;
  }
}

 

Scss에서는 Mixin을 통해 Css를 재사용이 가능하도록 모듈화 할 수 있다. 

위처럼 Mixin으로 media query를 생성하고 나면 아래와 같이 scss 파일에 적용한다.

@include를 통해 mixin을 불러와 사용한다.

@import "../../../static/style/mixin";

@include desktop {
  div {
    width: 70%;
    min-width: 890px;
    margin: 0 auto;
  }
}

@include tablet {
  div {
    width: 65%;
    min-width: 650px;
  }
}

@include mobile {
  div {
    width: 60%;
    min-width: 500px;
  }
}