Sassの「@at-root」を利用して上のclass名を参照しながら下のclass名を同じ位置にする

Sassの「@at-root」と「#{&}」を利用することで、記述した上のclass名を参照しつつも、下のclass名を上と同じ位置にするということができます。・・・とてもややこしいですね。
実際の展開例をご紹介します。

@at-rootは利用しない.scss ファイル

.sample {
  color: blue;
  #{&}-test {
    color: red;
  }
}

↓こちらを展開すると下記のようになります。

.css ファイル

.sample{color:blue}
.sample .sample-test{color:red}

@at-rootを利用した .scss ファイル

.sample2 {
  color: blue;
  @at-root {
    #{&}-test {
      color: red;
    }
  }
}

↓こちらを展開すると下記のようになります。

.sample2{color:blue}
.sample2-test{color:red}