SCSSでメディアクエリを使う（ブレイクポイント可変）

特定のブレイクポイントを準備せず、その場その場で数値を変えて使う用です

@mixin mqMax($width) {
  @media screen and (max-width:$width) {
    @content;
  }
}

/* 使用 */
@include mqMax(500px) {
  body {
    padding: 50px;
  }
}

/* これも可 */
body {
 ....
 @include mqMax(500px) {
  padding: 50px;
 }
 ....
}

出力されるCSS

@media screen and (max-width: 500px) {
  body {
    padding: 50px;
  }
}