【Sassを覚えよう！Vol.8】ネストをもうちょい使いこなす

Vol.4のSassの基本的な記述方法で書いた「ルールのネスト」ですが、もうちょっと詳しい使い方なんぞを書こうかなと思ってる次第です。

ネストのおさらい

軽くおさらいです。
次のように、通常のCSSでは出来ない入れ子による記述が出来るのがネストです。

#main {
	width: 600px;
	p {
		margin-bottom: 1.5em;
	}
}

これで、コピペを都度しないでHTMLの構造に沿った感じで書いていけるので、構造が把握しやすくなったりします。

ネストはセレクタの他に、プロパティでも使うことが可能です。

.sample {
	background: {
		repeat: no-repeat;
		position: right top;
		color: #666;
	}
}

これだと、ショートハンドで普通に書いた方が良さそうですが、ショートハンドを利用しつつ入れ子も可能なので、次のように書くことも出来ます。

.sample {
	border: 1px solid #999 {
		bottom-width: 2px;
	}
}

これなら、基準となるスタイルを最初にショートハンドで書いて、下辺だけスタイルを変更したい場合なんかに良い感じです。

他にネストでは、次のような感じで media queries をネストすることができます。

#page {
	width: auto;
	@media all and (orientation:landscape) {
		width: 460px;
	}
}

これをCSSに変換するとちゃんと以下のようにしてくれます。

#page {
  width: auto;
}
@media all and (orientation:landscape) {
  #page {
    width: 460px;
  }
}

これも何気に強力な機能の一つです。
スマホ案件も多くなってますし、レスポンシブウェブデザインとかでも、かなり活用できるかなーと思います。

ネストは、一番使用頻度が高くかなり使い勝手が良いですが、何でもかんでもネストしまくってると逆に可読性が落ちたり、ガチガチになってしまう事も考えられるので、ご利用は計画にって感じでしょうか。