[SCSS]親の親セレクタを &(アンパサンド) を使って引っ張りたい時の方法

親の親セレクタを &(アンパサンド) を使って引っ張りたい時の方法

// 最終的な出力
.parent .parent-child {
  color: #fff;
}
.parent:hover .parent-child {
  color: #000;
}

これまで無理だと思ってたのでこうしてた

.parent {
  &-child {
    color: #fff;
  }
  &:hover {
    .parent-child {
      color: #000;
    }
  }
}

以下のように 変数で定義すると成功した

.parent {
  &-child {
    color: #fff;
  }

  //$key = .parent
  $selector: #{&};

  &:hover {
    // parent:hover .parent-child になる
    & #{$selector}-child {
      color: #000;
    }
  }
}