Den &tegnet i Sass er unik ved at den representerer den nåværende velgeren. Det endres når du hekker. La oss si at du er nestet, men at du vil ha tilgang til en velger som sikkerhetskopierer nestingen litt. Trikset er å cache og bruke det dypere i hekkingen. Som:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Som kompilerer for:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Takk til Sergey Kovalenko for at du sendte inn dette trikset!)
Betydning det tillot deg å bruke .parentog .parent--elemi en velger samtidig. Litt esoterisk, men kan være nyttig noen ganger. Slike unngår situasjoner der du kanskje trenger å bruke @ at-root for å sikkerhetskopiere hele veien og lage valg igjen.
Sergeys kjerne har eksempler som er BEM-baserte:
- 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; ) ) )Produksjon:
.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; )