Sassのmixin、@contentを使ってメディアクエリを楽に書く

現場のプロが本気で教える HTML/CSSデザイン講義を読んで、Sassを使ったメディアクエリの記述の仕方が楽で便利だったため、覚えられるようここに記録しておこうと思います。
現場のプロが本気で教える HTML/CSSデザイン講義

記述の仕方

SCSS

$mobile-max-width: 600px; // 事前に最大幅を変数に設定

// $maxに$mobile-max-widthの値を渡す
@mixin mq-mobile($max: $mobile-max-width) {
  @media only screen and (max-width: #{$max}) {
    @content;
  }
}

.sample {
  font-size: 16px;
  // mixinを使用
  @include mq-mobile {
    font-size: 14px;
  }
}

これをコンパイルするとこうなります。

コンパイル後

CSS

.sample {
  font-size: 16px;
}

@media only screen and (max-width: 600px) {
  .sample {
    font-size: 14px;
  }
}

ちゃんとメディアクエリの設定ができましたね。

便利でらくちん

こうすることで、メディアクエリの設定をパソコン用とスマホ用別々に分けて書く必要がなくなり、記述が楽になりますね。
私も今後、コードを書くときに活用したいと思います。