SCSSの親セレクタ「&」で文字結合しないでくれ！

SCSS（Sass）において「&」は親セレクタで、コンパイルすると親要素のセレクタに置き換わります。
疑似要素などを付ける際には、大変便利なものです。

また、「&」の後ろに文字を記述する事で、親要素の後に記述した文字が結合されます。
例えば「.parent01」を親要素とし、「.parent01_child」を子要素とする場合、「&_child」と記述する事ができます。
これがコンパイルされると、ちゃんと「.parent01_child」と出力されます。

とっても融通の利く機能ではございますが・・・

やめてくれ！

クラス名で検索できなくなる

たとえば「.parent01_child」という要素があれば、「parent01_child」で検索して探したいもの。
しかし、「.parent01」「&_child」のように分割されていると、「parent01_child」で検索が出来なくなります。

「child」で検索をするにしても、「child」のクラス名が付けられた子要素が他にもあれば、親要素のセレクタのクラス名も確認しながら、子要素のクラスを照合しなければならないため、とてもめんどくさいのです。
エディタで選択した親要素は表示されるのですが、やはり検索で探したほうが簡単だし確実なのです。

なので書く際に多少面倒でも、クラス名は一部分に親セレクタを使わずに、フルで書いてほしいものです。

禁止になってほしい

正直、「&」に文字結合するのは禁止になって、コンパイルエラーにさえなってほしいぐらいです。
そうなると既存コードが動かなくなるでしょうが、メジャーアップデートの際にでも大々的に公表して行ってくれればいいかと。
それならその当時のコンパイラで動かせばいいですからね。

じつはこの書き方って、「Visual Studio Code」でシンタックスハイライトしていると、ID・クラスセレクタのオレンジ色ではなく、プロパティと同じ水色で表示されるんですよね。
もしかしたら、あまり推奨されていない書き方なのではと…

プログラミング的には、文字数や繰り返しを少なく出来る利点もあるかもしれませんが、ハッキリ言ってこの書き方は、検索して対象を調べるにも不便ですし、いちいち親子関係を目視で確認しなければならないため、クラスセレクタは検索一発で探せるように、フルで書くようになってほしいものです。