Media QueryとSassの効率的な書き方 短縮バージョン

Sassを使って、Media Queryを書くときに、いろいろ気をつけることまとめ。

↓この記事を元に自分用まとめです。
https://qiita.com/kyaido/items/828906ffa7198e99d0b7

#mixinの引数を短くするといろいろ書きやすい。

元記事は、変数を引数にしてましたが、ブレークポイントごとにmixinを作って引数使わない方が取り回ししやすいかと。

style.scss

$breakpoint: 768px;
$breakpoint-md: 960px;

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

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

@include mq {
  body{
    margin-top: 50px;
  }
}

body{
  @include mq-md{
    padding-top: 200px;
    background-color: #f00;
  }
}

お好みでファイル分けたりするといいかもですが、小さい案件なら1枚の方が取り回しが楽ですね。