SassにおけるMedia Query

一般的なmedia query

@media screen and (max-width: 600px) {
  h1 {
    color: red;
  }
}

_breakpoint.scss

$breakpoints: (
    "sm": "screen and (min-width: 400px)",
    "md": "screen and (min-width: 768px)",
    "lg": "screen and (min-width: 1000px)",
    "xl": "screen and (min-width: 1200px)",
) !default;

_mixin.scss

@mixin mq($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}

style.scss

@import "_breakpoint";
@import "_mixin";

.test {
    color: blue;

    @include mq(sm) {
        color: yellow;
    }

    @include mq(lg) {
        color: red;
    }
}

↓
style.css

.test {
  color: blue;
}
@media screen and (min-width: 400px) {
  .test {
    color: yellow;
  }
}
@media screen and (min-width: 1000px) {
  .test {
    color: red;
  }
}

うわ、これは凄い!!!!