sassで入れ子の中で&
を使うと親要素のクラス名を継承できるのですが、
多用するうちにコンパイル後の結果がよくわからなくなるのでメモします。
▼SCSS
.list {
.item { }
&::after { }
&__item { }
& &__item { }
}
▼CSS
.list .item {}
.list::after {}
.list__item {} ※入れ子にならないので注意
.list .list__item {}
More than 5 years have passed since last update.
sassで入れ子の中で&
を使うと親要素のクラス名を継承できるのですが、
多用するうちにコンパイル後の結果がよくわからなくなるのでメモします。
▼SCSS
.list {
.item { }
&::after { }
&__item { }
& &__item { }
}
▼CSS
.list .item {}
.list::after {}
.list__item {} ※入れ子にならないので注意
.list .list__item {}
Register as a new user and use Qiita more conveniently