【Sass】Map(連想配列)の値を使い、メディアクエリをmixinで定義

レスポンシブデザインでは、画面サイズによって、メディアクエリを変更しデザインを切り替えることが多くありますが、毎回、メディアクエリを記述するのは面倒なことが多いと思います。

今回はそのような場合に使用できるソースコードの例となります。

メディアクエリを@mixinで定義し、@includeで呼び出す例

例では、メディアクエリをSassの@mixin(ミックスイン)を使い定義し、呼び出す際には@includeの引数を指定することにより、指定したメディアクエリを簡単に使えるようにします。

メディアクエリを@mixinで定義

以下が@mixinを定義するソースコードの例となります。

// キーを「@includeで指定する引数」、値を「min-widthのサイズ」として、Mapのデータ型(連想配列)を作成
$break-point: (
  more-sm: 768px,
  more-md: 992px,
  more-lg: 1200px
);

// メディアクエリを@mixinで定義
@mixin media-queries( $key ) {
  @media ( min-width: map-get( $break-point, $key )) {
    @content;
  }
}

上記ソースコードでは、まずは、キー名を「@includeで指定する引数」、値を「min-widthのサイズ」としてペアにし、Map(連想配列)$break-pointを作成します。

次に、メディアクエリを@mixinで定義します。@mixinでは、関数名をmedia-queries()とし、引数を変数$keyとします。そして、メディアクエリのmin-widthの値は、関数map-get()で返します。

関数map-get()では、第1引数にMap名、第2引数にキー名を指定することにより、Mapのデータから、指定したキー名の値を返します。今回の例では、第1引数を$break-point、第2引数を$keyとしています。

@mixin media-queries()の引数と、関数map-get()の第2引数を同じ変数「$key」にすることにより、@includeで呼び出した場合に、指定したメディアクエリを出力できます。

引数にMap(連想配列)のキー名を指定し、@includeを呼び出す

以下のソースコードは、上記で定義した@mixinを@includeで呼び出す例となります。

.button{
  display: none;
  // @includeで呼び出し
  @include media-queries( more-sm ) {
    display: block;
  }
}

定義した@mixin media-queries( $key )を呼び出す際には、上記のように、 @include media-queries()の引数に、$break-point内のいずれかのキー名を指定します。そのことにより、 そのキー名とペアとなっている値を取得し、メディアクエリのmin-widthの値として出力しています。 

上記の例では、@include media-queries()の引数に、Map「$break-point」のキー名more-smを指定し、min-widthが768pxのメディアクエリを出力しています。

コンパイル後のCSSソースコード

今回の例で使用したSassのソースコードは、コンパイルされると以下のCSSになります。

.button {
  display: none;
}
@media (min-width: 768px) {
  .button {
    display: block;
  }
}

ちなみに、同じメディアクエリのサイズに対して、同じCSSのプロパティを、繰り返し使用したい場合には、以下のリンク先を参考にしてみてください。

参照サイト・書籍

コメントまたはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。Twitterで返信する場合はコチラから。