メディアクエリ用のミックスインは、変数の固定数字なしじゃないと使えない

150622_001

2016/04/09 Retina ディスプレイ用のミックスインを追加しました。

Sassを使い始めてから、レスポンシブコーディングのメディアクエリを、ミックスインでどう記述すべきか悩んでいました。GitHubでもいくつか公開されていますが、使ってみても何だかしっくりきません。例えば下記の2つです。

 

nonakaryuichi/scss_media_queries

 

anthonyshort / _media-queries.scss

 

問題が多い

これらのように、多数のプロパティを用意したり、ブレークポイントの数字をあらかじめ固定化すると、いくつかの問題が発生します。

  • 多数のプロパティを暗記しなければならない
  • 任意のブレークポイントを作れない
  • コードを増減させるのが面倒

これでは、Sassを使う意味が大きく損なわれます。

 

シンプルに修正

というわけで、ブレークポイントを任意で記述できるよう、変数のデフォルトを削除してシンプルに修正しました。

ミックスイン

 

例)@includeでブレークポイントを記述

 

コンパイル後のCSS

 

あくまで道具

150622_002

修正後は、ブレークポイントを自由に記述できるようになり、スマホファーストとPCファーストどちらでも柔軟に対応できるようになりました。覚えるプロパティも、

  • min(n)
  • max(n)
  • and(n, n)
  • rt

これだけです。
Sassの便利機能はあくまで道具ですから、道具を使うこと自体が目的化しないよう意識したいですね。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。