कहें कि आपको अपने कोड में कई स्थानों पर एक निश्चित चयनकर्ता का उपयोग करने की आवश्यकता है। यह निश्चित रूप से सामान्य नहीं है, लेकिन सामान होता है। बार-बार कोड अमूर्तता के लिए एक अवसर है। सैस में मूल्यों को जोड़ना आसान है, लेकिन चयनकर्ता थोड़ा पेचीदा है।
इसका एक तरीका यह है कि आप अपने चयनकर्ता को एक चर के रूप में बनाएं। यहाँ एक उदाहरण है जो चयनकर्ताओं की अल्पविराम से अलग की गई सूची है:
$selectors: " .module, body.alternate .module ";फिर इसका उपयोग करने के लिए, आपको इस तरह से वैरिएबल को प्रक्षेपित करना होगा:
#($selectors) ( background: red; )नेस्टिंग के साथ भी काम करता है:
.nested ( #($selectors) ( background: red; ) )लगाकर
एक चर भी एक उपसर्ग की तरह, चयनकर्ता का केवल एक हिस्सा हो सकता है।
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )आप घोंसले के शिकार का उपयोग उपसर्ग करने के लिए भी कर सकते हैं:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )एक मानचित्र में चयनकर्ता
शायद आपका अमूर्त खुद को एक महत्वपूर्ण / मूल्य जोड़ी स्थिति में उधार देता है। कि सास में एक नक्शा है।
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );आप उन्हें व्यक्तिगत रूप से उपयोग कर सकते हैं जैसे:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )या उनके माध्यम से पाश:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )उदाहरण
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा चयनकर्ताओं के लिए पेन सास चर देखें।