はじめに
こんにちは。
Webサイトの見た目をデバイスごとに最適化するレスポンシブ対応。この記事では、Sassの機能を活用して、効率よくレスポンシブ対応を実装する方法をご紹介します。これからSassでレスポンシブ対応をする方は参考にしてみてください。
Sassによるレスポンシブ対応の概要
この記事では、Sassの「ミックスイン」を使ったレスポンシブ対応の方法を紹介します。
ミックスインを活用することで、効率よくレスポンシブ対応を実装できます。
さらに、別ファイルで管理し、役割ごとに分割することでコードの保守性を向上させる方法もご説明します。
ファイル構成
以下のサンプルコードの説明では、次のファイル構成を使用します。
ミックスインは_mixins.scssファイルに定義することで、必要な箇所が見つけやすくなり、メンテナンス性を向上させます。
project/
│
├── css/
│ └── main.css ※コンパイル時に出力されるファイル
│
└── scss/
├── _mixins.scss ※ミックインを定義するファイル
└── main.scss ※全てのファイルをインポートするメインファイル
効率的なレスポンシブ対応
レスポンシブ対応する時は、一般的にメディアクエリを使います。Sassでも同様にメディアクエリを活用しますが、ミックスインと組み合わせることで、繰り返し使用する際のコード量を削減でき、効率的にレスポンシブ対応を行えます。
コード全体
//mapモジュール
@use 'sass:map';
//ブレイクポイント
$breakpoints: (
'pc': 'screen and (min-width: 768px)',
'sp': 'screen and (max-width: 767px)',
);
//メディアクエリのミックスイン
@mixin mq($breakpoint) {
@media #{map.get($breakpoints, $breakpoint)} {
@content;
}
}
解説
１．ブレイクポイントの定義
まずは、ブレイクポイントの条件(メディアクエリ)を変数$breakpointsに格納します。
//ブレイクポイント
$breakpoints: (
'pc': 'screen and (min-width: 768px)',
'sp': 'screen and (max-width: 767px)',
);
丸括弧(・・・)は、Sassの連想配列で、各キーに値を設定できます。この例では「PC用」「スマートフォン用」のキーに、デバイスごとのメディアクエリを設定しています。
２．ミックスインの定義
次に、ブレイクポイントに応じたメディアクエリを管理するミックスインを定義します。
//メディアクエリのミックスイン
@mixin mq($breakpoint) {
@media #{map.get($breakpoints, $breakpoint)} {
@content;
}
}
引数$breakpointにブレイクポイントのキー(pcやsp)を渡すことで、そのキーに応じたメディアクエリを適用することができます。
ここで使うmap.getは、連想配列から特定のキーの値を検索して取得する関数です。
mapは、モジュールのため、使う時はインポートする必要があります。
@use 'sass:map';と記述することで、モジュールをインポートできます。
基本構文
map.get($map, $key, $keys)
・$map：検索対象のmap
・$key：マップ内で取得したい値に対応するキーを検索
・$keys：マップ内でネストされたキーを検索
#{・・・}内に記述することで、変数を文字列に埋め込むができます。
この例では、マップ内から値を取得して、メディアクエリを定義することができます。
例えば、PCのキーを受け取った場合、@media screen and (min-width: 768px)が適用されます。
#{・・・} ※Interpolation
文字列に下記要素を埋め込むことが可能
・文字列
・計算式
・条件式
@contentは、ミックインを呼び出した時に、渡されたCSSの内容を挿入します。
例えば、@include mq(pc){ style }とすると、波括弧{ }内のstyleが@content部分に挿入されます。@contentを使うことで、スタイルを動的に追加することができます。
@content
コンテンツブロックと呼ばれるスタイル(CSS)のブロックを受け取る。
ミックスインの中に記述することで、コンテンツブロックを受け取ることができる。
ミックスインの使い方
次に、ミックスインの使い方を説明します。
１．_mixins.scssをインポート
この例では、main.scssファイル内でミックスイン(メディアクエリ)を使います。別のファイルで定義したミックスインを使う場合、インポートする必要があります。
@useを使うことでインポートすることができます。
//_mixins.scssをインポート
@use './mixins';
@useを使ったインポート
・ファイルパスを指定
・ファイル名を指定 ※拡張子は不要
２．ミックスインの使い方
ミックスインを使い方を説明します。
//_mixins.scssをインポート
@use './mixins';
//PC用スタイル
@include mixins.mq(pc) {
body {
font-size: 16px;
}
}
//スマートフォン用スタイル
@include mixins.mq(sp) {
body {
font-size: 14px;
}
}
ミックスインを使う時は@includeを使います。
@include
・同一ファイル内に定義したミックスインを使う場合
@include ミックスイン名(引数){・・・}
・別ファイル内に定義したミックスインを使う場合
@include ファイル名.ミックスイン名(引数){・・・}
引数に「pc」「sp」を指定することで、map($breakpoints)のキーに基づいてメディアクエリが生成されます。
後は、波括弧｛ ｝内に、PC用、スマートフォン用のスタイルを記述することで、レスポンシブ対応を実現することができます。
３．コンパイル
コンパイルすると以下のように出力されます。
$breakpointsで定義した通り、PC用、スマートフォン用のメディアクエリが出力されています。
@media screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
body {
font-size: 14px;
}
}
まとめ
Sassによるレスポンシブ対応の方法を紹介しました。
ミックスインを活用することで、コード量を削減でき、効率的にレスポンシブ対応することができます。さらに、ブレイクポイントを追加すれば様々な画面幅に対応でき、変更があっても柔軟に対応できる拡張性もあります。
引き続き、Sassに関する情報を発信していきますので、皆さんの学びに少しでも役に立てば幸いです。
ここまでお読みいただきありがとうございました。
参考サイト