SCSS를 이용해서 간편하게 미디어 쿼리를 적용하는 방법을 알아보자

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

먼저, SCSS는 Sass의 상위호환으로 CSS와 호환될 수 있는 문법을 갖고 있다.
CSS와 문법이 좀 다른 Sass에 비해 SCSS는 거의 완벽히 CSS 문법과 호환이 되어 편리하다.

SCSS를 기반으로 살펴보자!

변수(Variables)

변수를 사용할 수 있다.

$font-large: 3rem;
$font-medium: 1.6rem;
$font-default: 1.2rem;
$font-small: 0.8rem;

변수 사용법

body {
  font-size: #{$font-large};
}

믹스인(Mixins)

믹스인은 CSS를 묶어서 재사용할 수 있는 모듈로 만들어 준다.

@mixin card-view {
  font-size: 22px;
  border: 1px solid grey;
  border-radius: 4px;
}

이렇게 선언한 믹스인은 아래처럼 가져다 쓸 수 있다.

div {
  @include card-view;
}

컴파일 후

div {
  font-size: 22px;
  border: 1px solid grey;
  border-radius: 4px;
}

Sass/SCSS 미디어쿼리 작성

이제 믹스인과 변수의 개념을 활용해 미디어쿼리를 작성해보자

변수 작성

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

_variables.scss

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

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

사실 _variables.scss 는 변수만 따로 저장해놓을 파일이기에 별도의 CSS 파일로 컴파일될 필요가 없다.

이런 경우, 언더바를 파일명 앞에 붙이면, 성능 및 관리 상의 이득을 얻을 수 있음

믹스인 작성

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

먼저, 좀 전에 작성한 변수를 불러와 import 해준다.

_mixin.scss

@import "./variables";

불러올 때는 언더바나 확장자를 제외해도 정상 작동한다!

다음으로 본격적인 믹스인 작성을 해보자

_mixin.scss

@import "./variables";

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

이렇게 모바일, 태블릿, 데스크톱에 대한 믹스인 작성을 완료했다!

미디어 쿼리에서 min-width와 max-width를 변수를 활용해 적용했고 미디어 쿼리 내부에는 믹스인이 사용될 때 넘겨받은 content가 들어가도록 했다.

믹스인을 활용한 미디어 쿼리

믹스인으로 작성한 미디어 쿼리를 사용해보자

main.scss

@import "../../Styles/mixins";

@include mobile {
  .img-card {
    width: 100px;
  }
}

@include tablet {
  .img-card {
    width: 200px;
  }
}

@include desktop {
  .img-card {
    width: 300px;
  }
}

이렇게 믹스인을 사용하면 기기별로 손쉽게 미디어쿼리를 이용할 수 있다.