sass アンパサンド & 後ろ ネスト 親参照

sass の親を指定する & について、セレクタの後ろについているのを見かけた

親セレクタ {
  子セレクタ & {...}
}

このようにコンパイルされるが

子セレクタ 親セレクタ {...}

css 3では親を参照できないので、当然親のスタイルは変わりませんでした

でもこうしたらできた

<div class="A">
  <div class="hoge">
        hoge
    <div class="fuga">
        fuga
    </div>
  </div>
</div>

<div class="B">
  <div class="hoge">
         hoge
    <div class="fuga">
         fuga
    </div>
  </div>
</div>

* {
    outline: solid 1px;
    padding: 0.5rem;
}

.hoge {
    color: red;

    .fuga {
      color: blue;
    }
    .B & {
      color: orange;
    }
}

コンパイル後は .B の .hoge になる
なので逆になった

親セレクタ 子セレクタ  {...}

ネストしたエリアから .Bと&を利用して.hoge を.Bの子孫要素として指定したことになる

.B .hoge {
    color: orange;
}

B の hoge のみスタイルが変更された

要するに複数のHTMLが同じ構造を取る時に、その任意のネストより上位のセレクタを指定すればよいことになる

だからもし上位のセレクタとして body を指定するなら、各ページに body が存在するので、ページレベルで前述の共通スタイルの一部変更という範囲を広げることができる ( topページは pink、about ページは black のように )

各ページの body にどのページの body か区別するために任意のセレクタを付与していることで、以下のことが可能になると思う

body.x-page & {...}

試してないけど