सास में करंट सेलेक्टर (&) को कैच करना - सीएसएस-ट्रिक्स

&सास का चरित्र इस मायने में अनूठा है कि यह वर्तमान चयनकर्ता का प्रतिनिधित्व करता है। यह घोंसला बदलते ही बदल जाता है। मान लें कि आप नेस्टेड हैं, लेकिन आप एक चयनकर्ता तक पहुंचना चाहते हैं ताकि नेस्टिंग थोड़ा पीछे हो जाए। ट्रिक कैश करना और इसे नेस्टिंग में गहरा उपयोग करना है। पसंद:

.parent ( $this: &; &--elem ( display: inline-block; &:hover, #($this)__variation--active & ( background: red; ) ) )

कौन सा संकलन:

.parent--elem ( display: inline-block; ) .parent--elem:hover, .parent__variation--active .parent--elem ( background: red; )

(इस ट्रिक में भेजने के लिए सर्गेई कोवलेंको को धन्यवाद!)

जिसका अर्थ यह आप का उपयोग करने की अनुमति दी .parentऔर .parent--elemएक ही समय में एक चयनकर्ता के भीतर। थोड़ा गूढ़, लेकिन कभी-कभी उपयोगी हो सकता है। उन स्थितियों से बचा जाता है, जहां आपको सभी तरह से वापस जाने और चयनकर्ताओं को फिर से बनाने के लिए @ एट-रूट का उपयोग करने की आवश्यकता हो सकती है।

सर्गेई के उदाहरण में 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; ) ) )

आउटपुट:

.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; )