【Sass】&セレクタのメモ

&セレクタを.contentsセレクタの後ろに付与した場合は、.contentsに続いて&セレクタの内容が展開されます。

&セレクタには、親のセレクタの参照を返すため、結果は次のようになります。

// &の親セレクタはこれ
.preview .header .title
// であるため、contents &の結果はこうなる
.contents .preview .header .title

.preview {
  .header {
    .title {
      color: red;
      .contents & {
        color: green;
      }
    }
  }
}

.preview .header .title {
  color: red;
}
.contents .preview .header .title {
  color: green;
}