SCSS &で親要素によってスタイルを変える

SCSSでの＆（アンパサンド）の使い方は何パターンかありますが、タイトルにある親要素にこの要素があったらというスタイルの当て方はこのようになります。

.alert {
  .success & {　// 親要素指定
    ...
  }

  .info &_normal { // 親要素指定 + クラス名追加
    ...
  }
}

セレクターの後に&をつけると、そのセレクターが親要素だった時だけ任意のスタイルを当てることができます。

コンパイルされた結果：

.success .alert {
  ...
}

.info .alert_normal {
  ...
}

この指定方法の場合はセレクタの後にスペースを入れる必要があります。

.success& {}は無効になります。ただ、公式はこの制限の緩和を検討しているそうで、多くの意見があれば変更がはいるかもしれません。

おまけ

よく使われる&--classや& .child-classの書き方より直感的ではないかもしれません。さらに&を続けた場合はどうなるのでしょうか。

.four {
  .three & {
    width: auto;

    .two & {
    　width: auto;
    
      .one & {
      　width: auto;
      }
    }
  }
}

ここまでネストが深いのは良しとしませんが、今は無視して、上のスタイルがコンパイルされるとこうなります。

.three .four {
  width: auto;
}

.two .three .four {
  　width: auto;
}

.one .two .three .four {
  　width: auto;
}

さらにその親というように、それまでのセレクターを子要素として判断しています。