&Merkki Sass on ainutlaatuinen siinä, että se edustaa nykyisen valitsin. Se muuttuu pesittäessäsi. Oletetaan, että olet sisäkkäin, mutta haluat käyttää valitsinta, joka varmuuskopioi pesimisen hieman. Temppu on tallentaa välimuisti ja käyttää sitä syvemmällä pesinnässä. Kuten:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Mikä kokoaa:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Kiitos Sergey Kovalenkolle tämän temppun lähettämisestä!)
Tarkoittaen, että se antoi sinun käyttää valitsinta .parentja sen .parent--elemsisällä samanaikaisesti. Hieman esoteerinen, mutta voi olla hyödyllistä joskus. Eräänlainen välttää tilanteita, joissa joudut ehkä käyttämään @ at-root -toimintoa, kun haluat peruuttaa koko matkan ja tehdä valitsimet uudelleen.
Sergeyn pääsisällöllä on BEM-pohjaisia esimerkkejä:
- 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; ) ) )Tuotos:
.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; )