第8章 全機能Sassリファレンス

8-1 CSSの拡張機能(CSS Extensions)

■ルールのネスト
ルールセットをネスト(入れ子)で書いていくことができます。
---------------------
▼Sass
.item {
	p {
		margin: 0;
		a {
			display: block;
		}
	}
}
---------------------
▼CSS(コンパイル後)
.item p {
  margin: 0;
}
.item p a {
  display: block;
}
---------------------


■親セレクタの参照(&)
ネスト内で親セレクタを参照する場合、アンパサンド(&)を使うことで可能です。
---------------------
▼Sass
.item {
	margin: 0 0 30px;
	.top & {
		margin: 0;
	}
}
a {
	background: #eee;
	&:hover {
		background: #ccc;
	}
}
---------------------
▼CSS(コンパイル後)
.item {
  margin: 0 0 30px;
}
.top .item {
  margin: 0;
}

a {
  background: #eee;
}
a:hover {
  background: #ccc;
}
---------------------


■プロパティのネスト
ショートハンドで書くことが可能なプロパティをネストで書くことができます。
---------------------
▼Sass
section {
	margin: {
		top: 5px;
		bottom: 15px;
	}
	border: 1px solid #999 {
		top-color: #a99;
		bottom: 0;
	}
}
---------------------
▼CSS(コンパイル後)
section {
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #999999;
  border-top-color: #a99;
  border-bottom: 0;
}
---------------------


■プレースホルダーセレクタ(%foo)
@extend 専用のセレクタで、プレースホルダーセレクタは、コンパイル後生成されないため、無駄だったり不要なclassを作らずに済みます。
---------------------
▼Sass
%btnBase {
	text-align: center;
	text-decoration: none;
}
.btn {
	@extend %btnBase;
}
---------------------
▼CSS(コンパイル後)
.btn {
  text-align: center;
  text-decoration: none;
}
---------------------