1.セレクタのネスト（入れ子）とは？
例えば以下のようなHTMLがあったとします。
<nav>
<ul>
<li><a href="#1">りんご</a></li>
<li><a href="#2">バナナ</a></li>
<li><a href="#3">みかん</a></li>
</ul>
</nav>
このようにnav > ul > liというふうに入れ子状になった親子要素を装飾するときに、Sassでは以下のような記述でセレクタを指定することができます。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
コンパイルしてみると以下のようになります。
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Sassではこのような入れ子状のセレクタ指定をする際、省略した書き方をすることができます。カッコの中にさらにカッコがあるという書き方で、セレクタをネストさせることができるわけです。
2.子セレクタや隣接セレクタを指定する
ネストは親子セレクタの指定だけでなく、いろいろな使い方があります。
子セレクタを指定する
さきほどの例だと正確には子孫セレクタの指定になりますので、子セレクタを指定する方法です。
ul{
> li{
list-style: none;
}
}
コンパイル結果
ul > li {
list-style: none;
}
隣接セレクタを指定する
特定のセレクタに隣接したセレクタを指定する際も、ネストが使えます。
h1{
+ p{
color: #f00;
}
}
コンパイル結果
h1 + p {
color: #f00;
}
3.擬似クラスや疑似要素を指定する
擬似クラスである「:hover」や、疑似要素の「:after」「:before」を指定するのにも、ネストが使えます。ネストする際に「&（アンパサンド）」を付けます。
a{
color: #f00;
&:hover{
text-decoration: underline;
}
&:after{
content: "hoge";
display:block;
}
}
コンパイル結果
a {
color: #f00;
}
a:hover {
text-decoration: underline;
}
a:after {
content: "hoge";
display: block;
}
4.プロパティをネストする
backgroundやpadding、margin、borderなどには` - `を付けて指定できるオプションのようなプロパティがあります。例えばbackgroundならbackground-image、background-size、background-color、background-repeat、background-size…などです。Sassのネストを使うと、これらも省略して書くことができます。
div{
background: #f00{
image: url("hoge.jpg");
}
}
コンパイル結果
div {
background: #f00;
background-image: url("hoge.jpg");
}
5.メディアクエリをネストする
レスポンシブウェブデザインに欠かせない「メディアクエリ」もネストで記述することができます。
div {
margin: 20px;
@media all and (max-width:480px) {
margin: 0;
}
}
コンパイル結果
div {
margin: 20px;
}
@media all and (max-width: 480px) {
div {
margin: 0;
}
}
ネストを使うとコードの量が減り、読みやすくなるので、メンテナンス性があがります。ただし、ネストしすぎるとメンテナンス性が逆に下がりますので注意です。コーディングのルールで何回までネストして良いか決めておくと良いでしょう。目安としては3回ぐらいまでが良いでしょう。
