&Лик у Сасс је јединствен по томе што представља тренутни селектор. Мења се док се гнездиш. Рецимо да сте угнежђени, али желите приступ селектору који ће мало направити сигурносну копију гнежђења. Трик је у кеширању и коришћењу дубље у гнежђењу. Као:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Који се компајлира у:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Хвала Сергеју Коваленку што је послао овај трик!)
То значи да вам је омогућило да истовремено користите .parentи .parent--elemунутар селектора. Помало езотерично, али понекад може бити корисно. На неки начин се избегавају ситуације у којима ћете можда морати да користите @ ат-роот да бисте се повукли до краја и поново направили селекторе.
Суштина Сергеја има примере засноване на БЕМ:
- 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; ) ) )Излаз:
.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; )