SCSSで「&」でセレクタを参照する

ど忘れして時間をつかってしまったので、投稿します。

いつ使うの？

SCSSでネストさせながらstyleを記述した際に、親セレクタを参照したいときがあります。

• 親セレクタの一部を子セレクタの一部にしたい
• 連結セレクタを作りたい
• 疑似要素を書きたい
• 親セレクタを追加したい etc

もう少し具体的な場面

• ABテストをしたい
• 特定ブラウザや条件での出し分けを実現したい

＊親要素を変更すると、上記は簡単に実現できます。ただ、CSSとしては詳細度の問題があるので、恒常的に使用するのはあまり推奨はしないです。

何を使うの

「&」になります

コード例

scssコード

.parent {
  .hoge{ // 子孫セレクタ
    color: red;
  }
  &Hoge{ // セレクタ名を連結
    color: blue;
  }
  &__element{ // BEM
    color: green;
  }
  &:after{ // 疑似要素を書く
    display: block;
  }
  .piyo &.aaa{ // 親セレクタを追加（後方参照）
    color: red;
  }

  &,
  &__elm{ //親と同じstyleを追加する
    color: red;
  }
}

コンパイル後

.parent .hoge {
  color: red;
}
.parentHoge {
  color: blue;
}
.parent__element {
  color: green;
}
.parent::after {
  display: block;
}
.piyo .parent.aaa {
  color: red;
}
.parent, .parent__elm {
  color: red;
}

参考

https://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector
https://qiita.com/noqua/items/adc24c28c13e9b74d3ad
https://qiita.com/yoshida-hi/items/4caa37028080872cdc1a

---

以上になります。
有難うございました。