scss-mediaquery

// --------------------------------------------
// media query
// --------------------------------------------

$breakpoint-sm: 414px !default; /*iPhone XR*/
$breakpoint-md: 768px !default;
$breakpoint-lg: 1000px !default;
$breakpoint-xl: 1240px !default;

$breakpoints: (
  sm: 'screen and (max-width: #{$breakpoint-sm})',
  md: 'screen and (max-width: #{$breakpoint-md})',
  lg: 'screen and (max-width: #{$breakpoint-lg})',
  xl: 'screen and (max-width: #{$breakpoint-xl})');

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

// --------------------------------------------
// how to use
// --------------------------------------------

.hoge {
  @include mq(sm){
     display: flex;
  }
}