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