最近のWebサイト制作ではほとんど必須となっているモバイル対応。
そのモバイル対応でレスポンシブWebデザインを実装する場面の多くなってきていると思います。
そこで画面サイズに合わせてスタイルを変えるために、メディアクエリを使う場面も増えてきています。

そのメディアクエリもSassでネストして書くことができます。
メディアクエリをネストして書くと、このようになります。

保存して生成されたCSSを見てみると、ネストした親セレクタが、メディアクエリの中に含まれた形で出力されています。

さらに、メディアクエリの中に、メディアクエリをネストして書くと、画面幅の範囲の指定も書きやすくなります。

このSassをコンパイルして、CSSにするとこのようになります。

画面幅の指定だけでなく、印刷用の指定、printも使うことができます。
例えば、ヘッダーは印刷しない設定にする場合は、このようになります。

CSSではネストが使えないため、メディアクエリを書く場所が別のCSSファイルだったり、離れた場所に書かざるを得ませんでした。
そのため、見通しが悪くなり、同じセレクタに指定したスタイルの関係性がわかりにくくなっていました。
Sassのネストを使ってメディアクエリを書くことで、同じセレクタに画面サイズやメディアの種類によって、どのようなスタイルが適用されるのかが、わかりやすくなるメリットがあります。

レスポンシブデザインを実装する際には、メディアクエリのネストも試してみましょう。