【SCSS】mixinを活用したメディアクエリの効率的な管理方法2選

マップとミックスインを組み合わせたメディアクエリの管理

マップ（連想配列）を使用してブレイクポイントを定義し、ミックスインでメディアクエリを管理する方法です。

  /scss
   ├── _mixins.scss
   ├── _variables.scss
   ├── style.scss
  

1. ブレイクポイントの定義
   マップ（連想配列）を用いて、各デバイスや画面サイズに対応するメディアクエリを設定します。

   SCSS

   Copy

   1. // _variables.scss
   2. $breakpoints: (
   3.   'sp': 'screen and (max-width: 428px)',  // スマホ
   4.   'tb': 'screen and (max-width: 1279px)', // タブレット
   5.   'pc': 'screen and (min-width: 1280px)', // パソコン
   6. );

2. ミックスインの作成
   引数としてブレイクポイントのキーを受け取り、対応するメディアクエリを適用するミックスインを定義します。

   SCSS

   Copy

   1. // _mixins.scss
   2. @use 'variables';
   3. @use 'sass:map';
   4. @mixin mq($breakpoint) {
   5.   @media #{map.get(variables.$breakpoints, $breakpoint)} {
   6.     @content;
   7.   }
   8. }

3. ミックスインの使用
   スタイルシート内で、必要なブレイクポイントに応じてミックスインを呼び出し、スタイルを適用します。

   SCSS

   Copy

   1. // style.scss
   2. @use 'mixins';
   3. .example {
   4.   font-size: 16px;
   6.   @include mixins.mq('tb') {
   7.     font-size: 14px;
   8.   }
   10.   @include mixins.mq('sp') {
   11.     font-size: 12px;
   12.   }
   13. }

この方法により、メディアクエリの管理が一元化され、コードの可読性と保守性が向上します。

ミックスインにコンテンツブロックを渡す方法

ミックスイン内で@contentを使用し、呼び出し時にスタイルを挿入する方法です。

  /scss
   ├── _mixins.scss
   ├── style.scss
  

1. ミックスインの定義
   @contentを利用して、呼び出し時に指定されたスタイルを挿入できるようにします。

   SCSS

   Copy

   1. // _mixins.scss
   2. @mixin responsive($breakpoint) {
   3.   @media #{$breakpoint} {
   4.     @content;
   5.   }
   6. }

2. ミックスインの作成
   引数としてブレイクポイントのキーを受け取り、対応するメディアクエリを適用するミックスインを定義します。

   SCSS

   Copy

   1. @use 'mixins';
   2. .example {
   3.   font-size: 16px;
   5.   @include mixins.responsive('screen and (max-width: 1079px)') {
   6.     font-size: 14px;
   7.   }
   9.   @include mixins.responsive('screen and (max-width: 428px)') {
   10.     font-size: 12px;
   11.   }
   12. }

この方法では、メディアクエリの条件を柔軟に指定でき、スタイルの適用範囲を明確に管理できます。

ミックスインに変数を渡して管理する方法

  /scss
   ├── _mixins.scss
   ├── _variables.scss
   ├── style.scss
  

1. ブレイクポイントの定義
   変数に各デバイスの画面サイズを設定します。

   SCSS

   Copy

   1. // _variables.scss
   2. $sp: 428px;  // スマホ
   3. $tb: 1279px; // タブレット
   4. $pc: 1280px; // パソコン

2. ミックスインの作成
   引数として設定した変数を受け取り、対応するメディアクエリを適用するミックスインを定義します。

   SCSS

   Copy

   1. // _mixins.scss
   2. @use 'variables';
   4. @mixin sp {
   5.   @media screen and (max-width: variables.$sp) {
   6.     @content;
   7.   }
   8. }
   10. @mixin tb {
   11.   @media screen and (max-width: variables.$tb) {
   12.     @content;
   13.   }
   14. }
   16. @mixin pc {
   17.   @media screen and (min-width: variables.$pc) {
   18.     @content;
   19.   }
   20. }

3. ミックスインの使用
   スタイルシート内で、必要なブレイクポイントに応じてミックスインを呼び出し、スタイルを適用します。

   SCSS

   Copy

   1. // styles.scss
   2. @use 'mixins';
   4. .example {
   5.   font-size: 16px;
   7.   @include mixins.tb {
   8.     font-size: 14px;
   9.   }
   11.   @include mixins.sp {
   12.     font-size: 12px;
   13.   }
   14. }