CSS
Sass
scss

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

More than 1 year has passed since last update.

いつも&まわりがややこしくて分からなくなるのでメモ。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が必須でちょっと面倒