Sassの書き方（ネスト）

ネストの基本的な書き方

SassではHTMLの構造にあわせてセレクタを階層化して書くことができます。
通常のCSSにおいてもセレクタは階層順に並べて書くため、直感的には分かりやすい書き方になります。

以下の例は、HTMLにスタイルを適用するSassになります。
なお、ここではSCSS記法を使います。

index.html

<main>
	<section id="content1">
		<h2>コンテンツ1</h2>
		<p>画像を表示する<br>リンクは<a href="#">こちら</a></p>
	</section>

	<section id="content2">
		<h2>コンテンツ2</h2>
		<p>リストの表示テスト</p>
		<ul>
			<li>テスト1</li>
			<li>テスト2</li>
			<li>テスト3</li>
		</ul>
	</section>
</main>

style.scss

#content1 {
	padding: 40px;
	background-color: #f7f7f7;

	p {
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;
	}

	a {
		color: #0069d4;

		&:hover {
			color: #1d7fe3;
		}
	}

	@media screen and (max-width: 980px) {
		background-color: #00c;
	}
}

#content2 {
	padding: 40px;

	p {
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;
	}

	ul {
		padding: 0;
		list-style-type: none;

		li {
			margin-bottom: 5px;
			font-size: 1.0rem;
			line-height: 1.8em;

			&::before {
				display: inline-block;
				content: "";
				margin-right: 10px;
				width: 10px;
				height: 10px;
				border-radius: 5px;
				background-color: #ec8813;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

コンパイルすると、以下のようなstyle.cssが出力されます。
（gulpのoutputStyleを「expanded」で出力）

style.css

#content1 {
	padding: 40px;
	background-color: #f7f7f7;
}

#content1 p {
	margin-bottom: 20px;
	font-size: 1.0rem;
	line-height: 1.8em;
}

#content1 a {
	color: #0069d4;
}

#content1 a:hover {
	color: #1d7fe3;
}

@media screen and (max-width: 980px) {
	#content1 {
		background-color: #00c;
	}
}

#content2 {
	padding: 40px;
}

#content2 p {
	margin-bottom: 20px;
	font-size: 1.0rem;
	line-height: 1.8em;
}

#content2 ul {
	padding: 0;
	list-style-type: none;
}

#content2 ul li {
	margin-bottom: 5px;
	font-size: 1.0rem;
	line-height: 1.8em;
}

#content2 ul li::before {
	display: inline-block;
	content: "";
	margin-right: 10px;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #ec8813;
}

#content2 ul li:last-child {
	margin-bottom: 0;
}

「&」は親のセレクタを参照でき、以下のようにクラス名を使って子孫要素にも部分的に共通したクラス名を付けるように使うこともできます。
BEM（Block Element Modifier）を活用したいときにも便利な機能です。

クラス名をネスト内で参照する例

.content {
	background-color: #f7f7f7;

	&_title {
		font-size: 2.0rem;
	}

	&_link {
		color: #c00;
	}
}

コンパイルすると、出力されたCSSでは「&」が以下のように展開されます。

出力されたCSS例

.content {
	background-color: #f7f7f7;
}

.content_title {
	font-size: 2.0rem;
}

.content_link {
	color: #c00;
}

メディアクエリのネストは特徴があり、上記の例では#content1のネスト内に書いた「@media screen and (max-width: 980px)」がコンパイルすると#content1を包むように展開されていることが分かります。
ネストがコンパイル前と後で逆転するようになっています。

以下の例は先ほどのSassから#content1とメディアクエリの箇所を抜き出したコードです。

style.scss

#content1 {
	@media screen and (max-width: 980px) {
		background-color: #00c;
	}
}

コンパイルすると、以下のようにメディアクエリが#content1をネストする形になって書き出されます。

style.css

@media screen and (max-width: 980px) {
	#content1 {
		background-color: #00c;
	}
}

擬似クラス、擬似要素のネスト

a要素で使うことの多い:hoverや、CSSで便利な::beforeと::afterなどの擬似要素もネストを使って書くことができます。
以下の例ではa要素に対して擬似クラス、擬似要素を指定しています。

style.scss

a {
	color: #0069d4;

	&:hover {
		color: #1d7fe3;
	}

	&::before {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
	}

	&::after {
		display: block;
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
	}
}

style.css

a {
  color: #0069d4;
}
a:hover {
  color: #1d7fe3;
}
a::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
a::after {
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
}

通常のCSSのようにネストさせないで書くこともできますが、ネストした形で書くと対象のセレクタとの関係がわかりやすくなり便利です。

プロパティのネスト

Sassではセレクタのみでなく、CSSプロパティの名前をネストすることも可能です。

例えばbackgroundプロパティやmarginプロパティなど、複数の値を指定できるプロパティはネストして指定することができます。
以下の例ではbackgroundプロパティをネストした書き方です。

style.scss

.content {
	background: {
		image: url(../image/bg.png);
		position: left top;
		repeat: no-repeat;
		color: #f7f7f7;
	}
}

style.css

.content {
	background-image: url(../image/bg.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-color: #f7f7f7;
}