コード記述量の多い「メディアクエリ」を効率よく指定するためのSCSS用Mixin

メディアクエリを効率よく指定するためのMixinをメモしておきます。

メディアクエリは便利なのですが、記述量がとにかく長い！なので、こういった形で少しでも短く記述するようにしています。

Minin コード

各数値は、Bootstrapの切り替え数値に統一しています。長いものに巻かれるのが一番でしょうｗ

@mixin mq($breakpoint: medium) {
    @if $breakpoint == xs {
        @media screen and (min-width: 576px) {
            @content;
        }
    } @else if $breakpoint == sm {
        @media screen and (min-width: 768px) {
            @content;
        }
    } @else if $breakpoint == md {
        @media screen and (min-width: 992px) {
            @content;
        }
    } @else if $breakpoint == lg {
        @media screen and (min-width: 1200px) {
            @content;
        }
    } @else if $breakpoint == xl {
        @media screen and (max-width: 1201px) {
            @content;
        }
    }
}

使う時は、以下のようにします。

@include mq('sm'){
    //ここにスタイル
}

おわりに

このMixinを使う時は、PCとスマホで別　SCSSファイルにせず、１つに全部書いてしまうのがおすすめです。

こういう形にする事で、修正したい時、検索先が見つけやすいからです。