sassってめちゃくちゃ便利だなあ…
と思いながらボタンに装飾してたときにふと気付いた。同じクラスを当ててる違うタグの記述ってどうすればスマートなんだ…？？？
いまさら先頭にタグを足すとスマートじゃなくない？え、もっかいかくの？ってなったのでどうにか簡単に分岐をかけないかと悩んだやつ。なかなか検索が難しくてたどり着くまでに時間がかかったので忘れないようにメモ。
私の知識が浅かっただけでもちろんできました。

言語で説明するの難しいので例を出すと、.btnというクラス名が付いたaタグとspanタグでスタイルを変えたい場合はどう書けばいいの？という話。
分かりやすく書くと以下のようなことがしたい時の話。

a.btn {
    position: relative;
    padding: 15px 20px;
    background-color: $primary;
    color: $white;    
}

span.btn {
    position: relative;
    padding: 15px 20px;
    background-color: $gray;
    color:$dark
}

そこでこれ！！！！
@at-rootを使うとネストされたセレクタをルートまで戻せる

何に使うんだ…？って思ってたんだけど#{&}と併用すると記述の途中でも.btnの前にタグがぶち込めるってワケ
すごーい！
＆ってそもそも何も考えず呪文みたいに使ってたけど、親要素と置き換える働きを持つものらしいのでここでは&に.btnが格納されている！と考えるとわかりやすかったです。
@at-rootでルートに戻してから、span#{&}で完成👏
実は前も調べて書いたのに今回また調べてしまいました😂意味を理解したから次こそは調べずにかけるはず…！！

.btn {
    position: relative;
    padding: 15px 20px;
    background-color: $primary; 
    color: $white; 

    @at-root span#{&} { 
        background-color: $gray; color:$dark 
    } 
}

頑張って知識をつけて、できるだけ楽したいよね。