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

レスポンシブデザインでは画面サイズによってデザインを変更しますが、その際に、メディアクエリのサイズ毎に、CSSのプロパティは同じで、値のみを変更させることが多くあると思います。

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

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

今回の例では、まず、メディアクエリのサイズ毎に、サイトの横幅(width)を変更する@mixin(ミックスイン)を定義し、CSSのプロパティの値を1箇所で管理できるようにします。

そして、定義した@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;
  }
}

以下、ソースコードの説明となります。

Map(連想配列)データを作成

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

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

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

メディアクエリ毎にサイトの横幅を変更する@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;
  }
}

Sassのコンパイルの方法については以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。