【Sass】メディアクエリ毎にサイトの横幅を指定するmixinを定義

レスポンシブデザインでは、画面サイズによって、デザインを変更しますが、その際に、メディアクエリのサイズ毎に、異なる箇所に同じCSSのプロパティを、繰り返し使用したい場合があると思います。

今回は、そのような場合に使えるSassのソースコードとなります。

メディアクエリ毎にサイトの横幅を指定する@mixinを定義し、@includeで呼び出す例

例では、メディアクエリのサイズ毎に、同じサイトの横幅(width)を指定する@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;
  }
}

// それぞれの画面サイズで、それぞれのサイト横幅(width)を指定するメディアクエリを@mixinで定義
@mixin responsive-width{
  @include media-queries( more-sm ) {
    width: 750px;
  }
  @include media-queries( more-md )  {
    width: 970px;
  }
  @include media-queries( more-lg )  {
    width: 1100px;
  }
}

上記ソースコードの1行目~6行目までの箇所は、キー名を「@includeで指定する引数」、値を「min-widthのサイズ」としてペアにしたMapのデータ(連想配列)の作成。

8行目~13行目までの箇所は、メディアクエリを@mixinで定義しています。この箇所のソースコードの詳細については、以下のリンク先を参考にしてみてください。

次に、上記ソースコードの15行目以降の箇所では、上記で作成したMapのデータ$break-pointと、上記で定義した@mixin media-queries( )を使用し、@mixin responsive-widthを定義しています。

@mixin responsive-widthでは、その中で、@mixin media-queries()の変数に、$break-pointのそれぞれのキー名を指定し、それぞれのメディアクエリが出力されるようにします。そして、メディアクエリ毎に、サイトの横幅(width)を指定しています。

@includeで呼び出す

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

.site-header{
  @include responsive-width;
}

定義した@mixin responsive-widthを呼び出す際には、上記のように、 @include responsive-width; を指定します。そのことにより、 指定した要素に、メディアクエリ毎のサイトの横幅(width)を設定することが出来ます。

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

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

@media (min-width: 768px) {
  .site-header {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .site-header {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .site-header {
    width: 1100px;
  }
}

参考サイトなど

コメント投稿またはTwitterで返信

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

また、コメントは承認制となります。