Den &karaktär i Sass är unik genom att den representerar den aktuella väljaren. Det förändras när du häckar. Låt oss säga att du är kapslad, men du vill ha åtkomst till en väljare för att backa upp kapslingen lite. Tricket är att cacha och använda det djupare i häckningen. Tycka om:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Som sammanställs för att:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Tack till Sergey Kovalenko för att du skickade in det här tricket!)
Det betyder att du kan använda .parentoch .parent--eleminom en väljare samtidigt. Lite esoteriskt, men kan vara användbart ibland. Sortera undviker situationer där du kan behöva använda @ at-root för att backa hela vägen och göra om väljare igen.
Sergeys kärna har exempel som är BEM-baserade:
- 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; ) ) )Produktion:
.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; )