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

SCSSのmixinを活用して、メディアクエリを効率的に管理する方法を解説します。

SCSSは、CSSを拡張したメタ言語で、変数やmixinなどの機能を活用することで、スタイルシートの記述を効率化できます。

特に、レスポンシブデザインを実現するためのメディアクエリの管理は、SCSSのmixinを使用することで、より簡潔でメンテナンスしやすくなります。

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

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

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

ブレイクポイントの定義
マップ（連想配列）を用いて、各デバイスや画面サイズに対応するメディアクエリを設定します。
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. );
ミックスインの作成
引数としてブレイクポイントのキーを受け取り、対応するメディアクエリを適用するミックスインを定義します。
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. }
ミックスインの使用
スタイルシート内で、必要なブレイクポイントに応じてミックスインを呼び出し、スタイルを適用します。
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

ミックスインの定義
@contentを利用して、呼び出し時に指定されたスタイルを挿入できるようにします。
SCSS
Copy
1. // _mixins.scss
2. @mixin responsive($breakpoint) {
3. @media #{$breakpoint} {
4. @content;
5. }
6. }
ミックスインの作成
引数としてブレイクポイントのキーを受け取り、対応するメディアクエリを適用するミックスインを定義します。
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

ブレイクポイントの定義
変数に各デバイスの画面サイズを設定します。
SCSS
Copy
1. // _variables.scss
2. $sp: 428px; // スマホ
3. $tb: 1279px; // タブレット
4. $pc: 1280px; // パソコン
ミックスインの作成
引数として設定した変数を受け取り、対応するメディアクエリを適用するミックスインを定義します。
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. }
ミックスインの使用
スタイルシート内で、必要なブレイクポイントに応じてミックスインを呼び出し、スタイルを適用します。
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. }