SCSSで & （アンパサンド）を使ってアレを書きたい

いつも&まわりがややこしくて分からなくなるのでメモ。SCSSとCSSの対応関係。

SCSS入力

/* 合成のみ */
.element {
  &__inner {
    color: red;
  }
}

/* AND連結およびAND連結+合成 */
.element {
  &.element--attr {
    color: red;
  }
  &#{&}--attr {
    color: red;
  }
}

/* OR連結およびOR連結+合成 */
.element {
  @at-root {
    &,.element-another {
      color: red;
    }
    &,#{&}-another {
      color: red;
    }
  }  
  @at-root &,.element-another {
    color: red;
  }
  @at-root &,#{&}-another {
    color: red;
  }
}

/* ネストおよびネスト+合成 */
.element {
  .element__inner {
    color: red;
  }
  & &__inner {
    color: red;
  }
  #{&}__inner {
    color: red;
  }
}

CSS出力

/* 合成のみ */
.element__inner {
  color: red;
}

/* AND連結およびAND連結+合成 */
.element.element--attr {
  color: red;
}
.element.element--attr {
  color: red;
}

/* OR連結およびOR連結+合成 */
.element, .element-another {
  color: red;
}
.element, .element-another {
  color: red;
}
.element, .element-another {
  color: red;
}
.element, .element-another {
  color: red;
}

/* ネストおよびネスト+合成 */
.element .element__inner {
  color: red;
}
.element .element__inner {
  color: red;
}
.element .element__inner {
  color: red;
}

これだけは覚えておきたい

• セレクタ先頭に&があるときは「合成」，そうでないときは「ネスト」
• #{&}は変数として展開するため，親と合成する特殊効果は持たない
• ORは@at-rootが必須でちょっと面倒