Sass(Scss) Memo: 親セレクタの参照
- Published:
Sass(Scss)について覚えたことを少しずつ書いていきたいと思います。
今回は親セレクタの参照についてです。
Sassでは &
を使って親セレクタを参照することができます。
div { a { text-decoration: none; &:hover { text-decoration: underline; } } }
こうするとCSSは下記のように出力されます。
div a { text-decoration: none; } div a:hover { text-decoration: underline; }
&
が div a
に置換されています。
親セレクタを繰り返し記述しなくても良いので便利です。
ただ、隣接セレクタを使うときにはちょっと不便です。
例えば、下記のようなCSSをScss記法に書き換える場合。
div h1 { font-size: 20px; } div ul { margin: 2em 0; } div h1 + ul { margin-top: 1em; }
Scssで下記のように記述した時、h1 + &
は div h1 + ul
となって欲しいところです。
div { h1 { font-size: 20px; } ul { margin: 2em 0; h1 + & { margin-top: 1em; // override } } }
ですが、&
は親セレクタの div ul
に置換されますので、実際には h1 + div ul
と出力されてしまいます。
div h1 { font-size: 20px; } div ul { margin: 2em 0; } h1 + div ul { margin-top: 1em; }
&
を使いたい場合は、下記のように記述するとうまくいきます。
div { h1 { font-size: 20px; & + ul { margin-top: 1em; // override } } ul { margin: 2em 0; } }
div h1 { font-size: 20px; } div h1 + ul { margin-top: 1em; } div ul { margin: 2em 0; }
ただ、スタイルの上書きは後に書くことが多いので少し違和感があるかもしれません。
その場合、若干冗長ですが下記のように記述するといいと思います。
div { h1 { font-size: 20px; } ul { margin: 2em 0; } h1 + ul { margin-top: 1em; // override } }
div h1 { font-size: 20px; } div ul { margin: 2em 0; } div h1 + ul { margin-top: 1em; }
どちらかお好きなほうでどうぞ。