第3章これだけはマスターしたいSassの基本機能

3-1 ルールのネスト（Nested Rules）

<div id="main">
	<section>
		<h1>見出し</h1>
		<p>段落</p>
		<p class="notes">注意書き</p>
		<ul>
			<li>リスト</li>
		</ul>
	</section>
	<section>
		<h1>見出し</h1>
		<p>段落</p>
	</section>
<!-- / #main --></div>

#main section {
	margin-bottom: 50px;
}
#main section h1 {
	font-size: 140%;
}
#main section ul, #main section p {
	margin-bottom: 1.5em;
}
#main section p.notes {
	color: red;
}

#main {
	section {
		margin-bottom: 50px;
		h1 {
			font-size: 140%;
		}
		p, ul {
			margin-bottom: 1.5em;
		}
		p.notes {
			color: red;
		}
	}
}

子孫セレクタ以外のセレクタを使うには

#main {
	section {
		+ section {
			margin-top: 50px;
		}
		> h1 {
			font-size: 140%;
		}
	}
}

#main section + section {
  margin-top: 50px;
}
#main section > h1 {
  font-size: 140%;
}

#main {
	section + section {
		margin-top: 50px;
	}
	section > h1 {
		font-size: 140%;
	}
}

@media のネスト

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

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