Den &karakter i Sass er enestående, fordi det repræsenterer den aktuelle vælgeren. Det ændrer sig, når du reden. Lad os sige, at du er indlejret, men du vil have adgang til en vælger, der sikkerhedskopierer indlejringen lidt. Tricket er at cache og bruge det dybere i indlejringen. Synes godt om:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Hvilket kompilerer til:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Tak til Sergey Kovalenko for at sende dette trick!)
Det betyder, at det tillod dig at bruge .parentog .parent--elemi en vælger på samme tid. Lidt esoterisk, men kan være nyttigt nogle gange. Sort undgår situationer, hvor du muligvis skal bruge @ at-root til at bakke ud hele vejen og gendanne vælgere igen.
Sergeys kerne har eksempler, der er BEM-baserede:
- 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; )