Den aktuellen Selektor (&) in Sass cachen

Das Zeichen & in Sass ist einzigartig, da es den aktuellen Selektor darstellt. Es ändert sich, wenn Sie verschachteln. Nehmen wir an, Sie sind verschachtelt, möchten aber auf einen Selektor etwas weiter oben im Verschachtelungsgrad zugreifen. Der Trick besteht darin, & zu cachen und tiefer in der Verschachtelung zu verwenden. So

.parent {

  $this: &;
  
  &--elem {
    display: inline-block;
    
    &:hover,
    #{$this}__variation--active & {
      background: red;
    }
    
  }
  
}

Was 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!)

Das bedeutet, dass Sie .parent und .parent--elem gleichzeitig innerhalb eines Selektors verwenden konnten. Ein wenig esoterisch, aber manchmal nützlich. Es vermeidet Situationen, in denen Sie @at-root verwenden müssten, um ganz nach oben zu gehen und Selektoren neu zu erstellen.

Sergeys Gist enthält Beispiele, die BEM-basiert sind.

<ul class="pagination">
  <li class="pagination__item">
    <a class="pagination__link" href="#">
      Page 1
    </a>
  </li>
  <li class="pagination__item pagination__item--active">
    <a class="pagination__link" href="#">
      Page 2
    </a>
  </li>
</ul>

$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;
}