【🔰解説】Sassを使った、メディアクエリの書き方

はじめに：
ページを作るときに、いつも遭遇するメディアクエリの設定。
少しややこしいですよね。
「コピペでいけるけど、いまいち理解が足りてない」そんな課題を感じて、改めて勉強しました。参考になれば嬉しいです🙏

コード全体：

@use "sass:map";

$breakpoints: (
  sp: "screen and (max-width: 767px)",
  pc: "screen and (min-width: 768px)",
);

@mixin mq($breakpoint: pc) {
  @media #{map.get($breakpoints, $breakpoint)} {
    @content;
  }
}


/* 使う時 -------------------------------------- */

セレクター {
    @include mq(spかpc) {
        プロパティ: 値;
    }
}

---  ✂️ それぞれ分解① ---

@use "sass:map";

デフォルトでSassに組み込まれた「map(マップ)」という機能を、
このSassファイルに読み込んで使えるようにして！ という意味。

map(マップ)は、キーと値のペアを扱うことができる。
ブレイクポイントを指定するときの、「pcは768px以上、spは767px以下」といった、キーと値をペアで設定する場合に使われる。

@use "sass:map";　と書くことで、マップを使った便利な関数が使えるようになる。（例 map.get()、map.merge() など）

---

---  ✂️ それぞれ分解② ---

$breakpoints: (
  sp: "screen and (max-width: 767px)",
  pc: "screen and (min-width: 768px)",
);

変数名 breakpoints を定義し、2つのキーと値のペアを持たせている。
こうした、キーと値を持つものを Map型のデータタイプと呼ぶ。
括弧()やキーと値の書き方は、Map型のデータタイプ特有のもの。

✏️ 補足：min-width   max-widthとは？

---

---  ✂️ それぞれ分解③ ---

@mixin mq($breakpoint: pc) {
　> 中は省略
}

@mixin は、何度も使える「型」を作るイメージ。
型にしたい内容を、中括弧 {} で囲う。

mq はmixin(ミックスイン)の名前。media queryの略称として使っている。
mqという名前の@mixin を定義します！ という意味。

($breakpoint: pc)は引数を定義している。
「$breakpoint」は引数の変数名。実際には、先ほど定義した変数 breakpoints のキーである、"pc" や "sp" が引数として渡されるイメージ。
渡された引数は、後述する map.get()で使われる。

「 : 」はデフォルト値を設定するための記号。
「pc」は設定したいデフォルト値。mq()のように、引数が未記載のときは
ここで設定したデフォルト値が適用される。

---

---  ✂️ それぞれ分解④ ---

@mixin mq($breakpoint: pc) {

　@media #{map.get($breakpoints, $breakpoint)} {
　　> 中は省略 
　}

}

@media #{map.get($breakpoints, $breakpoint)} の部分が、
実際の「型」として表示されるイメージ。

@media は、どのブレイクポイントでも変わらないのでベタ書きしている。
#{} の中は、名前mqに渡された引数によって内容が変わる。
最終的には、以下の例のように表記されるイメージ。

　例1 )  @media screen and (max-width: 767px) 
　例2 )  @media screen and (min-width: 768px)

map.get() はSassの関数。(1)Map型のデータタイプ、(2)キーを指定すると、それに対応した値が取得できる。

　map.get() の使い方
　　・第1引数に、取得したいMap型のデータタイプの名前
　　・第2引数に、取得したい値のキー
　　をそれぞれ書く。

今回のケースでは、
第1引数に、取得したいMap型の変数名 $breakpoints を、
第2引数に、名前mqの引数である変数名 $breakpoint を書く。

参考：コード再掲

$breakpoints: (
  sp: "screen and (max-width: 767px)",
  pc: "screen and (min-width: 768px)",
);

@mixin mq($breakpoint: pc) {
  @media #{map.get($breakpoints, $breakpoint)} {
　　> 中は省略 
  }
}

✏️ 補足：
第2引数の $breakpoint には、"pc" や "sp"といった、第1引数の $breakpoints のキーが渡される。だから、取得したい値のキーが渡される変数である $breakpoint を、map.get()の第2引数に使う。

---

---  ✂️ それぞれ分解⑤ ---

@mixin mq($breakpoint: pc) {
  @media #{map.get($breakpoints, $breakpoint)} {

    @content;

  }
}

@contentは、mixinを呼び出して使うときに、「型」の中でも自由にコードを書ける部分のこと。今回でいうと @contentを使うことで、メディアクエリを設定したいセレクターが自由に書けるようになる。

---

---  ✂️ それぞれ分解⑥ ---

/* 使う時 -------------------------------------- */

セレクター {
    @include mq(spかpc) {
        プロパティ: 値;
    }
}

@include は 作ったmixinを使うときに書くもの。@includeの隣に、使いたいmixinの名前を書く(今回でいうmqのこと)。
mqの括弧()の中には、設定したいキーを書く(今回でいうspかpc)。

こうすることで、CSSには以下のように出力できる。
引数に"sp"を渡した場合：

@media screen and (max-width: 767px) {
  セレクター {
    プロパティ: 値;
  }
}