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

※本サイトはアフィリエイト広告を利用しています。

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

 

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

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

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

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

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

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

 

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

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

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

VSCodeを使ったSassの使い方が知りたいですか？この記事では、VSCodeという有名なエディタを用いた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(取得したい値のキー) {
 //処理したい内容
}

 
 
 

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

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

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

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

おすすめ書籍