&Sass karakter mevcut seçici temsil ettiği eşsizdir. Siz yuva yaptıkça değişir. Diyelim ki yuvalanmışsınız, ancak yuvayı biraz yedeklemek için bir seçiciye erişmek istiyorsunuz. İşin püf noktası, önbelleğe almak ve iç içe yerleştirmede daha derin kullanmaktır. Sevmek:
.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )Hangi derleme:
.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )(Bu numarayı gönderdiği için Sergey Kovalenko'ya teşekkürler!)
Yani aynı anda bir seçici içinde .parentve kullanmanıza izin verdi .parent--elem. Biraz ezoterik, ama bazen faydalı olabilir. Tüm yolu geri almak ve seçicileri yeniden oluşturmak için @ at-root kullanmanız gerekebilecek durumlardan kaçınır.
Sergey'in özünde BEM temelli örnekler var:
- 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; ) ) )Çıktı:
.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; )