css 記号の意味 セレクタ

Question

下のような記述を見つけたのですが、
（#）はId指定、&は親セレクタの参照というところまでわかっているのですが、つなぎ合わせた以下の記述が理解できないです……全体でどういう意味になっているか教えていただけませんか？？

  &#{&}-active {
        opacity: 1;
        transition: opacity .5s ease-in;
    }

どうやら上のcodeは純粋なCSSではないのですね…

https://qiita.com/yaaah93/items/2a79eb5b4bce35d2549c

のリンクから見つけたのですが、saas（？）を使っているのでしょうか…？？

Comments

[maisumakun]

純粋なCSSではこのような書き方はできません。Sass、LESSなど、何かしらの処理系を挟んでいる状況かと思いますので、それを明確にしていただければと思います。

[m.ts10806]

どのような場面で見つけたのか、前提部分をもう少し具体的に記述してください。

Answer 1

sassでは、(#)ではなく、
(#{})で補完の構文になります。

.test{
  &#{&}-active {
    opacity: 1;
    transition: opacity .5s ease-in;
  }
}

をコンパイルすると

.test.test-active{
  opacity: 1;
  transition: opacity .5s ease-in;
}

になりますね。

参考サイト：https://tenderfeel.github.io/SassReference/sass-script/interpolation.html

Answer 2

下のような記述を見つけたのですが、

（#）はId指定、&は親セレクタの参照というところまでわかっているのですが、つなぎ合わせた以下の記述が理解できないです……全体でどういう意味になっているか教えていただけませんか？？

少なくともCSSのセレクタ記述ではないので理解できるはずがありません.