„ &Sass “ veikėjas yra unikalus tuo, kad reprezentuoja dabartinį pasirinkiklį. Lizdoje jis keičiasi. Tarkime, kad esate įdėtas, bet norite, kad prieiga prie parinkiklio būtų atsarginė lizdo atsarginė kopija. Apgaulė yra talpyklą ir naudoti giliau lizde. Kaip:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Kuris rengiamas:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Ačiū Sergejui Kovalenkai, kad išsiuntė šį triuką!)
Tai reiškia, kad tai leido vienu metu naudoti .parentir .parent--elemper selektorių. Šiek tiek ezoterinė, bet kartais gali būti naudinga. Rūšiuojant išvengiama situacijų, kai gali tekti naudoti „@ at-root“, kad galėtumėte visiškai atsitraukti ir iš naujo pasirinkti selektorius.
Sergejaus esmė yra pavyzdžiai, pagrįsti 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; ) ) )Išvestis:
.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; )