sassで「&」を使用した親クラスとのセレクタ連結方法

Question

sassで「＆」を使用して、親クラスとうまくセレクタを連結する方法を探しています。
現段階では直接クラス名を記述しているのでスッキリできる方法がないかなと思い、
投稿させていただきました。

コンパイル後

.hoge .hoge-hoga {
    color: red;
}
.hoge:hover .hoge-hoga {
    color: blue;
}

コンパイル前

.hoge {
    & &-hoga {
        color: red;
    }
    &:hover {
        // ↓↓↓ .hogeを親から持ってきて連結したい
        .hoge-hoga {
          color: blue;
        }
    }
}

よろしくお願いいたします。

Answer 1

自分はこんな感じでやってます。

.hoge {
  & &-hoga {
    color: red;
  }
  $parent: &;
  &:hover {
    #{$parent}-hoga {
      color: blue;
    }
  }
}

コンパイル後

.hoge .hoge-hoga {
  color: red; }
.hoge:hover .hoge-hoga {
  color: blue; }

Comments

[helloman]

おぉ、こんな方法もあるのですね。

Answer 2

スッキリしているかは分かりませんが、@at-rootを使う方法もあります。

.hoge {
  & &-hoga {
    color: red;
  }
  &:hover & {
    @at-root &-hoga {
      color: blue;
    }
  }
}

Comments

[helloman]

まさしくこれでした。
ありがとうございます。
勉強になります。