メディアクエリの書き方 [sass]

最近のWebデザインではメディアクエリを使用したレスポンシブデザインが必須となっています。sassでももちろんメディアクエリはサポートされています。sassならではの拡張がされているので複雑になりがちなメディアクエリもスッキリと書けるようになります。

Web

メディアクエリの書き方

通常のcssでは次のように書くのが一般的でしょう。

.node-page {
  width: 960px;
}
@media only screen and (max-width: 360px) {
  .node-page {
    width: 100%;
  }
}

sassでこのように書いてもいいのですが、もっとわかりやすい書き方があります。

.node-page {
  width: 960px; // デフォルトの幅
  @media only screen and (max-width: 360px) {
    width: 100%; // モバイル時の幅
  }
}

オリジナルのスタイルと画面が小さいときのスタイルをネストして整理できるので、対応関係を素直に記述することができます。

この書き方はセレクタ単位でスタイルをまとめるのに適しています。しかし場合によっては、画面サイズ毎にスタイルを整理したいこともあるでしょう。そのようなときには普通のcssと同じようにメディアクエリを書いてもまったく問題はありません。

画面サイズを変数で指定する

メディアクエリのパラメータには変数を指定することができます。そして変数には単なる数値だけでなく、文字列を指定することもできます。

＄phone: “only screen and (max-width: 360px)”;
＄tablet: “only screen and (max-width: 768px)”;

.node-page {
  width: 960px;
  @media #{＄phone} {
    width: 360px;
  }
  @media #{＄tablet} {
    width: 768px;
  }
}

この書き方だと可読性があがるうえ、ブレークポイントの値を変更したいとき、変数の値を変えるだけですべてのメディアクエリを変更することができます。
なお変数を参照するとき #{＄phone} と書いていることに注意してください。（プレースホルダーと言います。）プロパティの値として変数を参照するのではないので、普通に＄phoneと書くとエラーになってしまいます。