Ο &χαρακτήρας στο Sass είναι μοναδικός καθώς αντιπροσωπεύει τον τρέχοντα επιλογέα. Αλλάζει καθώς φωλιάζετε. Ας υποθέσουμε ότι είστε ένθετοι, αλλά θέλετε να έχετε πρόσβαση σε έναν επιλογέα για να δημιουργήσετε αντίγραφα ασφαλείας για λίγο. Το κόλπο είναι να αποθηκεύσετε κρυφή μνήμη και να το χρησιμοποιήσετε βαθύτερα στην ένθεση. Αρέσει:
.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; )(Ευχαριστώ τον Sergey Kovalenko για την αποστολή αυτού του κόλπου!)
Αυτό σημαίνει ότι σας επέτρεψε να χρησιμοποιήσετε .parentκαι .parent--elemμέσα σε έναν επιλογέα ταυτόχρονα. Λίγο εσωτερικό, αλλά μερικές φορές μπορεί να είναι χρήσιμο. Ταξινόμηση αποφυγών καταστάσεων όπου ίσως χρειαστεί να χρησιμοποιήσετε το @ at-root για να δημιουργήσετε αντίγραφα ασφαλείας και να κάνετε εκ νέου τους επιλογείς.
Το επίκεντρο του Sergey έχει παραδείγματα που βασίζονται σε BEM:
- 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; )