【Sass(SCSS)】#{$this}を使って入れ子の親(Block)のセレクタ名を継承
BEMとSMACSSをカスタムしたルールを使っていて、BEMの書き方がSCSS(SASS)と相性いいので気に入っている。
SCSSでは親セレクタ名を引き継げるので子要素に「&」をつけて親セレクタ名を引き継いで管理するが、親要素がModifierのバージョン違いみたいな時に、Modifier(バージョン違い)の子要素にも大本の親セレクタ名を引き継ぎたいケースが出てくる。
どういうことかというと、CSSだとこんな感じ。
.block .block__element{...}
.block--modifier .block__element{...}その場合、SCSSだと、こういう風になる。
.block{
&__element{...}
&--modifier{
.block__element{...}
}
}この時に、Modifierの中の、「block__element」がせっかく他で「&」を使ってセレクタ名を継承する書き方で統一したのに、ここだけそのまま記述するのがどうも嫌なので調べてみたらあった。
.block{
$this: &;
&__element{...}
&--modifier{
#{$this}__element{...}
}
}セレクタ名を参照したい要素に「$self: &;」を記述して、対象となる子要素のセレクタ名に#{$self}とすると、親要素のセレクタ名が引き継ぐことができる。
基礎知識レベルなんだけどネットで情報探すと、検索の仕方が重要になるし、なかなか求めている情報が見つけられないから、参考書買って基礎をやり直そうと思った。
参考サイト
BEMについて
SMACSSについて
