SASSでアンパサンドを後置できるって知らんかった

こんにちは!
またちょっと間があいてしまいました、有村です!!
日々コードレビューをしていると、新しい考え方や「ほうほうそりゃ知らんかった」って書き方に出会えて楽しいですね!
というわけで、今日のテーマはSASSでアンパサンドを後置できるって知らんかったです!

私がアンパサンド(&)を使うのは、だいたい

こういう、MindBEMdingの記法的な、「前のclass名と連結させる」ときです。

なので、アンパサンドって「前置しかできない」って思い込んでたんですが…。
普通に後置できるらしいですね。

ここで振り返り。
アンパサンドは「親セレクタの参照」。
そして、後置もできるってことは…

みたいな、「基本は display: block; だけど、fugaの子孫要素として居る場合は display: inline;」みたいなこともできるわけですね!

そこで私は期待した………

みたいに、子孫要素じゃなくて、要素セレクタ + class名指定で、限定指定みたいなことできるんじゃね?と…。
↑で言うと、「基本は .btn は display: flex; だけど、button要素の時だけは display: block;」みたいな。

それを考えた理由は、かつてのbutton要素に display: flex; が効かねぇの記事から。

そこでこんなコード書いてみた。

お気付きの方も多いでしょう……

ってなった。そりゃそうか。惜しい。

次は、こういう書き方をしてみた。

アンパサンド前のスペースを削ってみた。そしたらこうなった。

「”&” may only be used at the beginning of a compound selector.」

コンパイルすらできなかった!!!!
「&__」はいいけど、「__&」はダメってことね……。

ちょっと調べてみたけど、SASS側でどうこうはできなそう…
なので、実現方法としては

で対応しました…。

ん〜結果は同じなんですけど、この書き方だと「基本は display: block; で、button要素じゃないときだけ display: flex;」って、
「基本と例外」が逆転しちゃってるのが、目的に合ってないような気がするんですよね…。
とはいえ、今はこれしか思いつかなかったので、↑の実装で落ち着かせてます。
それ以外は、視認性も特段悪いわけではないと思うので…。

というわけで!
やりたかったことが完全に実現できたわけではないのですが、アンパサンド後置できる!って学んだことは大きな収穫です!
適材適所で活用していきたいと思いまーす!!

それでは、きょうはこのへんで。