sass_3-1-3 @media のネスト

@mediaを使う場合の記述を学んだ。

CSSとsassの比較。

#main {
  float: left;
  width: 640px;
}
@media screen and (max-width: 640px) {
  #main {
    float: none;
    width: auto;
  }
}

CSSで書くとこうなるけれど、sassで書くとこうなる。

#main {
	float: left;
	width: 640px;
	@media screen and (max-width: 640px) {
		float: none;
		width: auto;
	}
}

今回もネストする事で短くなって、分かりやすい。
@mediaで#mainを囲うよりよっぽど分かりやすい。#mainのことだとひと目で分かる。
@medeiaはこれから使っていかなくてはならないので、今日やれて良かった。

参考

メディアクエリ - Web developer guide | MDN

HTML - Media Queriesの指定について - Qiita