//미디어쿼리
$breakpoint-mobile: 481px;
$breakpoint-tablet: 758px;
$breakpoint-desktop: 1200px;
변수 파일
@import "./variables";
@mixin mobile-sm {
@media screen and (max-width: #{$breakpoint-mobile - 1px}) {
@content;
}
}
@mixin mobile {
@media screen and (max-width: #{$breakpoint-tablet - 1px}) {
@content;
}
}
@mixin tablet {
@media screen and (max-width: #{$breakpoint-desktop - 1px}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$breakpoint-desktop}) {
@content;
}
}
믹스인 파일