【Sass】mixinでメディアクエリを管理する方法【応用編】

【Sassのmixinを使ったメディアクエリについて知りたい人】

「メディアクエリのコードを毎回書くのってめちゃくちゃ面倒。。Sassのmixinを使った便利なコードの書き方があれば知りたいなぁ。」

こういった疑問に答えます。

この記事の内容は、過去にWeb制作会社でエンジニアをしていたこの僕が当時現場で実際に学んだもの。

記事を読み終わる頃には、メディアクエリに関して、

コードを書く量が減って最高
ブレイクポイントに使っている値が一覧で分かる

こういった状態になっていますよ。

※ブレイクポイントとは... ブラウザの画面幅にあわせて、Webサイトを最適なレイアウトで見れるように設定する境界値のこと。

ちなみに、 Sassの導入と基礎に関しては下記の記事で解説しています。

≫【初心者向け】VSCodeでのSassの使い方を徹底解説【導入手順から学習方法まで】

では、メディアクエリを mixinで管理する方法を解説していきます。

メディアクエリをSassのmixinで管理する方法

今回使うSassの機能は、以下の2つ。

機能その①：マップ
機能その②：mixin

機能その①：マップ

実際に見た方が早いと思うので、下記のコードをご覧ください。

$breakpoint: (
  s: 'screen and (max-width: 767px)',
  m: 'screen and (max-width: 1024px)',
  l: 'screen and (max-width: 1280px)'
);

こちらがマップでブレイクポイントを管理したコード。

このマップですが、これだけ見ても初めての方は訳が分からないと思うので、 コードの説明を下記にまとめました。

マップを『定義』する方法

$マップの名前: (
  キー01: キー01に対する「値」,
  キー02: キー02に対する「値」,
  キー03: キー03に対する「値」
);

まず上記のように、 $から始まる任意の名前をマップにつけます。

そしてその後ろの丸括弧（）内に、 キー（key）とそれに対する値（value） を連想配列のようなかたちで カンマ『,』で区切って記述します。

これがマップの基本形です。

JavaScriptなどで使用する「連想配列」に慣れていない方は難しく感じるかもですが、今は完璧に理解できなくても大丈夫です。

暗記する必要もありませんので、使いながら徐々に慣れていきましょう。

マップから『値を取得』する方法

次に、先ほど定義したマップから値を取得する方法をみていきます。

マップから値を取得するには、『map-get』という関数を使います。

こちらも実際に見た方が早いと思うので下記のコードをご覧ください。

$breakpoint: (
  s: 'screen and (max-width: 767px)',
  m: 'screen and (max-width: 1024px)',
  l: 'screen and (max-width: 1280px)'
);
map-get($breakpoint, s);

screen and (max-width: 767px)  //出力結果

上記の説明が下記の通り。

map-get($マップの名前, 取得したい値のキー)

このように、『map-get()』の丸括弧（）内に第一引数としてマップの名前、第二引数に取得したい値に対応するキーを指定します。

以上がマップの説明です。

このマップの機能と、これから説明する「mixin」という機能を使ってメディアクエリを管理します。

では次に、『mixin』についてみていきます。

機能その②：mixin

このmixinの読み方ですが、「ミックスイン」や「ミクシン」など人によって呼び方が違うのですが、「ミックスイン」が無難そうです。

さてこのmixinですが、 "CSSのスタイルを定義しておいて、別の場所でそれを使い回せる機能"です。また、引数が使えるのも大きな特徴です。

mixinを『定義』する方法

mixinを定義するコードが以下の通り。

 //マップを定義
$breakpoint: (
  s: 'screen and (max-width: 767px)',
  m: 'screen and (max-width: 1024px)',
  l: 'screen and (max-width: 1280px)'
);

 //mixinを定義
@mixin mq($bp) {
  @media #{map-get($breakpoint, $bp)} {
   @content;
  }
}

上記のコードを見て、

「なんじゃこりゃー！！」

と思ったのが、 #{map-get($breakpoint, $bp)} の部分ではないでしょうか。

こちらの波括弧{ }内の『map-get($breakpoint, $bp)』は先ほど説明したので分かると思いますが、問題はその外の『#{ }』でしょう。

こちらは『インターポレーション』と言い、この記述がないとプロパティの値としてでしか使用することができません。

しかし、この『#{ }』の波括弧の中に記述することにより、セレクタやプロパティ名にも使用することが出来るようになります。

mixinを『呼び出す』方法

最後に、上記で定義したmixinを下記のコードで呼び出すだけです。

 //mixinの定義
@mixin mq($bp) {
  @media #{map-get($breakpoint, $bp)} {
   @content;
  }
}

 //mixinの呼び出し
@include mq(取得したい値のキー) {
 //処理したい内容
}

コンパイル後の結果が下記の通り。

@media screen and (max-width: 〇〇px) {
 //処理したい内容
}

今回のコードのまとめ【コピペもOK】

最後に、今回紹介したコードを一覧にしてまとめておきます。

「正直難しかった」という方は、こちらをコピペしていただいても構いません。

マップの定義

$breakpoint: (
  s: 'screen and (max-width: 767px)',
  m: 'screen and (max-width: 1024px)',
  l: 'screen and (max-width: 1280px)'
);

マップから値を取得

map-get($breakpoint, 取得したい値のキー)

mixinの定義

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

mixinの呼び出し

@include mq(取得したい値のキー) {
 //処理したい内容
}

これらのコードを使うことで、冒頭でも言った通り

コードを書く量が減って最高
ブレイクポイントに使っている値が一覧で分かる

上記を実感していただけると思います。

はじめのうちは難しく感じるかもですが、本記事を繰り返し読んでぜひ実務で使ってみてください。

おすすめ書籍

【Web制作者のためのSassの教科書】

Amazon 楽天ブックス Kindle