SassのMapでメディアクエリのブレークポイントを効率的に管理する方法

※本記事にはプロモーションが含まれています。

レスポンシブデザインに対応する際に、ブレークポイントを効率的に管理する方法として、SassMapの使い方について解説します。

SassのMapを使用することで、メディアクエリのブレイクポイントを一元管理できます。これにより、コードの保守性が向上し、ブレークポイントの追加や変更が容易になります。

この記事では、SassのMapを使ってメディアクエリのブレークポイントを効率的に管理する方法について紹介します。

なお、SassをCSSにコンパイルするやり方については以下の記事で解説していますので、Sassのコンパイルのやり方がわからない場合は、こちらから環境構築を行なってください。

SassのMapとは

Mapは、キーと値のペアを格納するデータ構造で、さまざまな情報をグループ化して管理するのに便利な機能です。
map-get関数を使用することで、指定したキーに対応する値を取得できます。

例えば、Mapは以下のように変数に対して、キーと値のペアで作成します。

$colors: (
  // 「primary」がキー、「#bf4080」が値
  primary: #bf4080,
  secondary: #969faf,
);

このMapは、色を名前で管理するためのものです。
ここで、map-getを使ってprimaryというキーに対応する値(色のコード)を取得することができます。

$primaryColor: map-get($colors, primary); // $primaryColorには #bf4080 が代入される

p {
  color: $primaryColor;
}

このように、map-getは第一引数に対象のMap、第二引数に取得したい値のキーを指定します。
この関数を使用することで、SassのMapから必要な情報を簡単に取得することができます。

これにより、関連する情報を一元化して整理しやすくなります。

MapとMixinを使用してブレークポイントを定義する

Mapでブレークポイントの値を設定する

まずは、ブレークポイントを効率的に管理するために、それぞれのブレークポイントのサイズをMapで設定します。
$breakpoints変数にMapを使用して、ブレークポイントの値を設定します。

今回は、以下のような3つの異なる画面サイズに対応するブレークポイントを定義します。

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
);

メディアクエリを生成するMixinを作成する

メディアクエリを管理するMixinを以下のように作成します。

@mixin media($breakpoint) {
  @media (#{map-get($breakpoints, $breakpoint)} <= width) {
    @content;
  }
}
  • mediaというMixinを作成し、引数にとして変数$breakpointを設定します。
  • @mediaの値には、map-get関数を使用してMapから値を取得します。
  • そして、@contentを使用してMixinを呼び出した際に、プロパティを指定する場所を示します。

map-get関数

SassのMapから特定の値を取得するための便利な方法です。
Mapはキーと値のペアを持つデータ構造であり、map-getを使用することで、指定したキーに対応する値を取得できます。

メディアクエリのブレイクポイントを呼び出して適用する

先ほど作成したMixinを、Mapで設定したキーを引数に設定して呼び出します。

.item {
  width: 100%;

  @include media(md) {
    width: 50%;
  }

  @include media(lg) {
    width: 33.333%;
  }
}

以下のように、Mapで設定したブレークポイントの値でコンパイルされたら成功です。

.item {
  width: 100%;
}
@media (768px <= width) {
  .item {
    width: 50%;
  }
}
@media (992px <= width) {
  .item {
    width: 33.333%;
  }
}

別ファイル内のMapとMixinを使用する

最後に、先ほど作成したMapとMixinを別ファイルに分けて、呼び出して使用する方法について解説します。

大規模な開発プロジェクトでは、メンテナンス性を高めるために、Mixinなどのモジュールを別ファイルで管理することが一般的です。
これにより、コードの重複を避けることができ、一貫性のあるスタイルを維持することが簡単になります。

関数をパーシャルファイルとして作成する

Sassでは、ファイルを分割して管理することをパーシャルと呼びます。
パーシャルファイルを作成する場合は、ファイル名の先頭に_をつけます。これにより、パーシャルファイルはSassのコンパイル対象から除外されます。

それでは、以下のようにMapで定義したブレークポイントとMixinを、_breadkpoint.scssパーシャルファイルに移動しましょう。

style.scss
_breakpoint.scss
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
);

@mixin media($breakpoint) {
  @media (#{map-get($breakpoints, $breakpoint)} <=width) {
    @content;
  }
}

別ファイルの関数を呼び出して使用する。

別ファイルのMixinを使用する際は@useを使用してパーシャルファイルを相対パスで指定します。
その際、パーシャルファイルの先頭の_.scss拡張子は省略することができます。

Mixinを使用する場合は、@useで指定したファイル名の後にピリオド(.)を付けてMixinの名前を指定します。

@use 'breadkpoint';

.item {
  width: 100%;

  @include breadkpoint.media(md) {
    width: 50%;
  }

  @include breadkpoint.media(lg) {
    width: 33.333%;
  }
}

この状態でSassをコンパイルして、Mixinの内容が反映された状態でCSSが作成されていれば成功です。

また、パーシャル(ファイル分割)の使い方については、以下の記事でより詳しく解説しています。

まとめ

SassのMapを使用してメディアクエリのブレークポイントを管理することは、コードの簡潔さと保守性を向上させます。
ブレークポイントを一元管理することで、レスポンシブデザインの実装がより効率的になります。

おすすめの書籍