먼저 각 환경에 대한 breakpoint를 변수로 선언한 파일을 생성해줍니다.
_variable.scss
// Breakpoint
$xs: 0,
$sm: 480px,
$md: 720px,
$lg: 960px,
$xl: 1200px
파일명 앞에 _
를 붙인 이유는 파일단위로 구분하여 컴파일이 되지않기 때문입니다.
_mixin.scss
@import "./variables";
@mixin xs {
@media (min-width: #{$xs}) and (max-width: #{$sm - 1px}) {
@content;
}
}
@mixin sm {
@media (min-width: #{$sm}) and (max-width: #{$md - 1px}) {
@content;
}
}
@mixin md {
@media (min-width: #{$md}) and (max-width: #{$lg - 1px}) {
@content;
}
}
@mixin lg {
@media (min-width: #{$lg}) and (max-width: #{$xl - 1px}) {
@content;
}
}
@mixin xl {
@media (min-width: #{$xl}) {
@content;
}
}
main.scss
@include xs {
.img {
width: 100px;
}
}
@include sm {
.img {
width: 200px;
}
}
...
다음과 같이 미디어 쿼리를 적용할 수 있습니다.