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

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

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

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

/* 中だけで書いても可 */
body {
  ...
  @include mqMax(500px) {
    padding: 20px;
  }
  ...
}

/* 入れ子も簡単 */
body {
  ...
  @include mqMax(500px) {
    padding: 20px;
    @include mqMax(400px) {
      padding: 15px;
    }
  }
  ...
}

出力されるCSS

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

（検索用：sass）