#はじめに
フロントエンドの皆さんならば
sass なら at-root
stylus なら &__
とかでBEM のコーディングをうきうきやっていることでしょう。
#ここで問題
こういう書き方は static な状態に限ってはいいんだけど
例えば
.root
&__element
hoge
&.status_active
え、.root__element に対して書きたい。。。。ほげええええ
みたいな状況に諸処陥る。
いい解決策が欲しいところ、書き方の構造自体が間違っているとしたら、意見をもらいたいですね。
#Stylus における打開策
selector() をつかう
stylus においては selector()という関数が結構いかしている。
これは現状の selector を 文字列で返すというもの
つまりこういう解決ができる。
.root
self = selector()
&__element
hoge
&.status_active
{self}__element
hogehoge
どや顔なんてできない不器用な解決方だが、とりあえず問題は解決できた。
いかがでしょうか?
もっとスマートなやり方がある方は是非シェアして欲しい。