Sass の & について

これ、意味分かります？

sass↓
.hoge {
  width: 10px;

  .fuga & {
    width: 100%;
  }
}

css↓
.hoge {width: 10px;}
.fuga .hoge {width: 100%;}

え、なにその & の使い方。
そして、コンパイルすると.fuga .hogeの順になるの？
と初心者は思いました。

上記の内容をきっかけに、& をちゃんと理解していなかったので調べてみたことをまとめました。

& とは

ズバリ、親セレクターです。
役割としては、
ネストされている内側のセレクターが外部（親）のセレクターを参照してくれます。
何を参照するかと言うと、セレクター名と、セレクターのプロパティを参照します。
それにより、コードを省略して書けたりすることも魅力です。
コンパイル時は、&の場所に外側のセレクターが配置されます。

sass↓
.hoge {
  width: 10px;
  &.fuga {
    width: 10px; // .hogeのプロパティを参照できるので、同じプロパティを使用する際は不要となる
    color: red;
  }
}

css↓
.hoge{width: 10px;}
.hoge.fuga{width: 10px;color: red;}

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
url: https://sass-lang.com/documentation/style-rules/parent-selector

& はセレクタの後置でも書ける

冒頭でも書いた、セレクタの後置記述。普段見慣れないのでこんないいの？と思ってました。。
&の役割は親セレクタを参照しているということで、後置でも前置でも&のやっていることは変らないです。

セレクタの後置以外に、一つのセレクタに&を複数配置することも可能です。

sass↓
.hoge {
  width: 10px;
  .fuga & + & {
    color: red;
  }
}
css↓
.hoge {width: 10px;}
.fuga.hoge+.hoge{width: 10px;color: red;}

最後に

&の役割、書き方など理解はしましたが、&がセレクタの後置だったりは可読性悪そう、、と思ったりしました。
私が携わってきたコード達に後置が少なかっただけで、一般的には良く使われる書き方なのか気になりました。（後置で書かれていたコードは結構古めのものでした。）
CSS難しいけど頑張ろう〜〜〜