//미디어쿼리
$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;
  }
}

믹스인 파일