前回はルールのネストについて紹介しました。
ネストを使ってスタイルを記述していると、親のセレクタを参照したい時があります。
Sassには、子のセレクタから親のセレクタを参照する独自のセレクタが用意されています。
今回は、ネストされた親のセレクタを参照する方法を紹介します。
親セレクタを参照する &（アンパサンド）
親のセレクタを参照する際は&（アンパサンド）を使います。
&は親のセレクタを参照しますので、子のセレクタに記述します。
&の記述は、子セレクタの前と後の両方に記述できます。
子セレクタの前に記述
以下に子セレクタの前に&を記述する例を示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
a { text-decoration: none; &:hover { color: #f00; } &.hoge { color: #00f; } } ul.pagination { li { margin: 0; width: 10%; &.prev { float: left; } &.next { float: right; } } } |
子セレクタの前に&を記述する形式は、:hover、:activeなどの擬似クラスや、ID、Classなどのセレクタに指定できます。
上記のSassをCSSに変換すると以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
a { text-decoration: none; } a:hover { color: #f00; } a.hoge { color: #00f; } ul.pagination li { margin: 0; width: 10%; } ul.pagination li.prev { float: left; } ul.pagination li.next { float: right; } |
&を記述した部分に親セレクタのaが参照されて埋め込まれます。
子セレクタの後に記述
以下に子セレクタの後に&を記述する例を示します。
|
1 2 3 4 5 6 7 8 9 |
section { width: 360px; #hoge & { width: 480px; } .fuga & { width: 240px; } } |
上記のSassをCSSに変換すると以下のようになります。
|
1 2 3 4 5 6 7 8 9 |
section { width: 360px; } #hoge section { width: 480px; } .fuga section { width: 240px; } |
子セレクタの前に記述した場合と同様に、&を記述した部分に親セレクタのaが参照されて埋め込まれます。
親セレクタの名前を子セレクタの名前の一部に使用する
|
1 2 3 4 5 6 7 8 9 |
.box { width: 400px; &__element { margin-bottom: 1em; &--modifier { background-color: #d67fff; } } } |
上記のSassをCSSに変換すると以下のようになります。
|
1 2 3 4 5 6 7 8 9 |
.box { width: 400px; } .box__element { margin-bottom: 1em; } .box__element--modifier { background-color: #d67fff; } |
&を記述した部分に親セレクタのaが埋め込まれています。
.boxセレクタの子セレクタにあたる__elementの前と、孫セレクタにあたる–modifierの前に&を記述して親セレクタを参照していますが、CSSに変換された結果では、すべて同じ階層に出力されます。
どれだけネストの階層が深くなってもすべてフラットに出力される仕様になっています。
ネストを使って子セレクタの位置に配置したセレクタの名前の一部に親セレクタの名前を参照する場合は
.box .box__elementや.box .box__element–modifierとはならずに
.box__elementや.box__element–modifierとなります。
Sassのネストの階層と同様に入れ子にして出力したい場合は、以下のように記述する必要があります。
Sass
|
1 2 3 4 5 6 7 8 9 |
.box { width: 400px; & &__element { margin-bottom: 1em; &--modifier { background-color: #d67fff; } } } |
変換後のCSS
|
1 2 3 4 5 6 7 8 9 |
.box { width: 400px; } .box .box__element { margin-bottom: 1em; } .box .box__element--modifier { background-color: #d67fff; } |
&を使用した親セレクタ名の流用は、BEMなどのクラス名の命名規則用いている場合に利用することで、コードの記述量を減らすことができます。
参考
本記事の執筆には、以下の書籍を参考にさせていただきました。
「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」は、Sassを学習するのであれば、是非手元に置いておきたい1冊になります。