&Märk Sass on ainulaadne, et see on praeguse valijat. See muutub pesitsedes. Oletame, et olete pesitsenud, kuid soovite ligipääsu valijale pesastamise varundamiseks. Trikk on vahemällu salvestamine ja pesitsemise sügavam kasutamine. Nagu:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Mis koostab:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Täname Sergei Kovalenkot selle triki saatmise eest!)
See tähendab, et see võimaldas teil kasutada valijat korraga .parentja .parent--elemsees. Veidi esoteeriline, kuid võib mõnikord olla kasulik. Omamoodi välditakse olukordi, kus peate võib-olla kasutama funktsiooni @ at-root, et kogu tee tagasi varundada ja valijaid uuesti teha.
Sergei loendis on näiteid, mis põhinevad BEM-il:
- 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; ) ) )Väljund:
.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; )