@メディアのネスト

メディアクエリをネスト出来る。

CSSの場合はネストが使えないので、メディアクエリを各位置が離れてしまい
可読性が損なわれるのをscssのネスト機能を使うことで見やすく管理がしやすくなる。

sass

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

cssコンパイル後

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