Edited at

SCSSの`&`を使った時の挙動

More than 1 year has passed since last update.

sassで入れ子の中で&を使うと親要素のクラス名を継承できるのですが、

多用するうちにコンパイル後の結果がよくわからなくなるのでメモします。

▼SCSS

.list {

 .item { }

 &::after { }
 
 &__item { }

 & &__item { }
}

▼CSS

.list .item {}

.list::after {}

.list__item {} ※入れ子にならないので注意

.list .list__item {}