미디어쿼리 사용하기 (@mixin)

Mixin을 사용하면 미디어쿼리 분기점을 변수처럼 설정해둘 수 있어서 css 작성 시 분기점 픽셀을 매번 직접 지정하지 않아도 된다.

mixin 사용하기

mixin 코드가 들어갈 scss 파일 하나를 만든다. 아래와 같이 작성하고 scss 파일 내에서 @include 변수명 { 내용 } 형태로 작성하면 컴파일된 css 파일에서는 css의 미디어쿼리 문법으로 변환되어 있다.

/* _mixins.scss */

// Break Point
$tablet: 768px;
$laptop: 1020px;
$desktop: 1400px;

// Mixins
@mixin desktop {
  @media (max-width: #{$desktop}) {
    @content;
  }
}

@mixin laptop {
  @media (max-width: #{$laptop}) {
    @content;
  }
}

@mixin tablet {
  @media (max-width: #{$tablet}) {
    @content;
  }
}

뷰포트의 가로길이가 작아질수록 페이지의 좌우 padding을 10rem -> 5rem -> 1rem 순으로 줄이는 코드이다. 이때 laptop -> tablet 순으로 include해야한다!

mixin 파일에서 반응형을 데스크탑 우선형으로 구현하기 위해 max-width를 기준으로 하도록 작성했다.

따라서 반대 순서로 include하면 뷰포트 크기가 가장 작아졌을때 max-width: tablet, max-width: laptop 두 조건 모두에 해당되는데, laptop 코드가 뒤에 있으므로 앞의 tablet 코드를 덮어쓰고 laptop 코드가 적용되어 padding이 내가 원했던 1rem이 아닌 5rem이 적용되기 때문이다.

/* _base.scss */

.container {
  padding: 0 10rem;
  margin: 0 auto;
  // width: 120rem;

  @include laptop {
    padding: 0 5rem;
  }

  @include tablet {
    padding: 0 1rem;
  }
}

/* 컴파일된 css 파일에서는 이런식으로 변환된다 */

.container {
  padding: 0 10rem;
  margin: 0 auto;
  // width: 120rem;
}

@media (max-width: 1020px) {
  .container {
    padding: 0 5rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
}

참고문헌
https://nykim.work/84