sassで「&」を使用し、子クラスに親クラス名を連結させる方法

Question

前回、
https://teratail.com/questions/219025
のページで質問させていただいたのですが、
応用編と思い、下記のsassを色々試しているのですが、
なかなか希望通りになりません。

コンパイル前

.panel {
  background: blue;
  &-header {
    background: dark-blue;
  }
  &.theme & {
    background: red;
    @at-root &-header {
      background: light-blue;
    }
  }
}

コンパイル後

.panel {
  background: blue;
}
.panel-header {
  background: dark-blue;
}
.panel.theme .panel {
  background: red;
}
.panel.theme .panel-header {
  background: light-blue;
}

// ------------
// 希望
// ------------
.panel {
  background: blue;
}
.panel-header {
  background: dark-blue;
}
// ↓↓↓ 希望の箇所
.panel.theme {
  background: red;
}
// ↓↓↓ ここは意図通り
.panel.theme .panel-header {
  background: light-blue;
}

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

Comments

[maisumakun]

「panel.theme .panel-header」のほうは意図通りですか？

[helloman]

これは意図通りです

Answer 1

記述に誤りがないでしょうか。単に子要素として連結する場合、左のアンパサンドは不要です。
なので、 &.theme &と.theme &を分けて記述する必要があると思います。

【Sass】親セレクタを参照する&や+の使い方

Comments

[helloman]

やはり分けるしかないっぽいですね。

[FKM]

自分としては他に方法は思いつかないです。