The &karakter dalam Sass adalah unik karena merupakan pemilih saat ini. Itu berubah saat Anda bersarang. Katakanlah Anda bersarang, tetapi Anda ingin akses ke pemilih mencadangkan sedikit bersarang. Triknya adalah dengan meng-cache & dan menggunakannya lebih dalam di nesting. Suka:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Yang mengkompilasi ke:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Terima kasih kepada Sergey Kovalenko untuk mengirimkan trik ini!)
Artinya, Anda dapat menggunakan .parentdan .parent--elemberada dalam selektor pada saat bersamaan. Sedikit esoterik, tapi terkadang berguna. Semacam menghindari situasi di mana Anda mungkin perlu menggunakan @ at-root untuk mundur sepenuhnya dan membuat ulang penyeleksi.
Inti Sergey memiliki contoh yang berbasis BEM:
- Page 1
- Page 2
$gray-very-light: #ccc; .pagination ( display: flex; padding: 0; list-style: none; $this: &; &__item ( border: 1px solid $gray-very-light; & + & ( margin-left: .5rem; ) ) &__link ( display: block; padding: .25rem .5rem; text-decoration: none; &:hover, #($this)__item--active & ( // Here we get .pagination from $this variable background-color: $gray-very-light; ) ) )Keluaran:
.pagination ( display: flex; padding: 0; list-style: none; ) .pagination__item ( border: 1px solid #ccc; ) .pagination__item + .pagination__item ( margin-left: .5rem; ) .pagination__link ( display: block; padding: .25rem .5rem; text-decoration: none; ) .pagination__link:hover, .pagination__item--active .pagination__link ( background-color: #ccc; )