Rotate your phone

YOSHISUGA My Portfolio

Blog

SCSSの@mixinを使ってメディアクエリを管理する

cssでメディアクエリを管理するのは正直面倒くさいですよね、コードも長くなるしサイトの規模が大きくなればなるほど、まとめるのも大変です。

これから紹介するscssでのメディアクエリの書き方を使えば、コード量も減りコードの見通しも良くなって管理もかなり楽になります。

まず、mapとmixinを定義します。

$breakpoints: (
 sp: 481px,
 tb: 769px,
 btb: 1025px,
 pc: 1026px
  );

@mixin pc {
  @media only screen and (min-width: map-get($breakpoints, pc)) {
    @content;
  }
}

@mixin sp {
  @media only screen and (max-width: map-get($breakpoints, sp)) {
    @content;
  }
}

@mixin tb {
  @media only screen and (min-width: map-get($breakpoints, sp)) and (max-width: map-get($breakpoints, tb)) {
    @content;
  }
}

@mixin btb {
  @media only screen and (min-width: map-get($breakpoints, tb)) and (max-width: map-get($breakpoints, btb)) {
    @content;
  }
}
 

下記のような要素があった場合

<div class="block"></div>

上記で定義したmixinを使ってメディアクエリを設定してみます。

.block {
  @include pc {
  width: 800px;
  }
  @include tb {
  width: 500px;
  }
  @include sp {
  width: 200px;
  }
}

このように呼び出してプロパティを指定するだけです。かなりコードがスッキリしていて管理しやすいのがわかるかと思います。

まとめ

最初にmapや変数、mixinを使ってメディアクエリの定義さえしてしまえば、あとはincludeで呼び出すだけです。サイトのレスポンシブ化が必須となっている今だからこそ覚えておくべきテクニックかと思います。

メディアクエリの定義などは、本体のstyle.scssに直接記述するのではなく_variables.scssのようなファイルを一つ作っておいてそこに使えそうな変数、mixin、関数などをまとめて定義しておいて@importを使ってファイルを読み込めば、他のサイトを制作するときに流用できそうですね。

下記のコードのscssのview compiledをクリックすればコンパイル前と後のコードが比較できます。メディアクエリの記述のところがかなりスッキリしているのがわかるかと思います。resultの内容が上手く切り替わりませんが…(おそらくcodepenのresult自体の画面幅に依存しているため)。

See the Pen yLVbLOK by yoshiyuki suganuma (@yoshisuga) on CodePen.

Blog一覧へ戻る