// ブレイクポイントを設定
$bp-sm: 576px; 
$bp-md: 768px; 
$bp-lg: 992px; 
$bp-xl: 1200px; 

//ここでmin-widthを指定
@mixin sm {
  @media (min-width: ($bp-sm)) {
  @content;
 }
}

@mixin md {
  @media (min-width: ($bp-md)) {
  @content;
 }
}

@mixin lg {
  @media (min-width: ($bp-lg)) {
  @content;
 }
}

@mixin xl {
  @media (min-width: ($bp-xl)) {
  @content;
 }
}