Das &Zeichen in Sass ist insofern einzigartig, als es den aktuellen Selektor darstellt. Es ändert sich, wenn Sie nisten. Angenommen, Sie sind verschachtelt, möchten jedoch auf einen Selektor zugreifen, der die Verschachtelung ein wenig unterstützt. Der Trick besteht darin, & zwischenzuspeichern und tiefer in der Verschachtelung zu verwenden. Mögen:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Welche kompiliert zu:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Danke an Sergey Kovalenko für diesen Trick!)
Dies bedeutet, dass Sie gleichzeitig .parentund .parent--eleminnerhalb eines Selektors arbeiten können. Ein wenig esoterisch, kann aber manchmal nützlich sein. So werden Situationen vermieden, in denen Sie möglicherweise @ at-root verwenden müssen, um den gesamten Weg zurückzutreten und Selektoren neu zu erstellen.
Sergeys Kern enthält Beispiele, die auf BEM basieren:
- 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; ) ) )Ausgabe:
.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; )