【Sass】@mixin を使ってメディアクエリを召喚する（超効率的なレスポンシブ構築）

cssではメディアクエリをいちいち書く必要があります。

@media only screen and (max-width : 767px){
}

毎回メディアクエリ書くのも手間ですし、ブレイクポイント（サイズ）が変更になった場合は、全て修正しなければなりません。
そこで、メディアクエリの@mixinを定義してしまえば、それ以降では@includeで呼び出すだけでレスポンシブが書けます。
いくつかやり方があるそうなのですが、個人的に毎回コピペして使っている「Map型で複数のブレイクポイントを定義」する方法を記載します。

Map型でブレイクポイントを定義

値はString型にするためダブルクォーテーション（”）で囲います。

$breakpoints: (
  s: "only screen and (max-width: 399px)",
  m: "only screen and (max-width: 767px)",
  l: "only screen and (max-width: 999px)",
  xl: "only screen and (max-width: 1199px)"
) ;

@mixinの作成

Map型をmap-get()関数を使って取得します。
コンテントブロックをミックスインに渡して、展開させます。
@contentを記載した位置で展開がされます。

@mixin media($breakpoint) {
    @media #{map-get($breakpoints,$breakpoint)}{
        @content;
    }
}

@mixinを呼び出す時

ミックスインを呼び出す時は、
@include [ミックスインで定義した名前](Map型で定義した値)
で使用します。

/* lを使用する場合 */
@include media(l){
}

コンパイルすると、

@media only screen and (max-width: 999px) {
}

となります。

効率的にcssを組み立てて、ストレスレスなコーディングを！