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

メディアクエリの書き方

通常の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%; // モバイル時の幅
  }
}

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

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

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

＄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と書くとエラーになってしまいます。