&Caracterul în Sass este unic prin faptul că reprezintă selectorul curent. Se schimbă pe măsură ce vă cuibăriți. Să presupunem că sunteți imbricat, dar doriți un pic accesul la un selector pentru a face copie de rezervă. Trucul este să-l cache și să îl folosești mai adânc în cuibărit. Ca:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Care se compilează pentru:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Mulțumim lui Sergey Kovalenko pentru că a trimis acest truc!)
Adică ți-a permis să folosești .parentși .parent--elemîn cadrul unui selector în același timp. Un pic ezoteric, dar poate fi util uneori. Un fel de evită situațiile în care este posibil să trebuiască să folosiți @ at-root pentru a vă retrage până la capăt și pentru a reconfigura selectoarele.
Esențialul lui Sergey are exemple bazate pe 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; ) ) )Ieșire:
.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; )