एक चयनकर्ता को अर्हता प्राप्त करने के लिए मिक्सिन - सीएसएस-ट्रिक्स

चयनकर्ता को अपने संबंधित नियमों के भीतर से योग्यता प्राप्त करने का कोई आसान तरीका नहीं है। योग्यता से मेरा मतलब है कि एक तत्व का नाम (जैसे a) एक वर्ग (जैसे ) के लिए prepending है .btnताकि एक उदाहरण के लिए एक तत्व चयनकर्ता और एक वर्ग चयनकर्ता (जैसे a.btn) के संयोजन के लिए विशिष्ट हो ।

आज तक, ऐसा करने के लिए सबसे अच्छा (और अब तक केवल वैध तरीका) निम्नानुसार है:

.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )

वाह, निश्चित रूप से वास्तव में सुरुचिपूर्ण नहीं है, क्या यह है? आदर्श रूप से, आप एक मिक्सिन के पीछे इस तरह के भयावह सिंटैक्स को छिपाना चाह सकते हैं ताकि आप एक स्वच्छ और मैत्रीपूर्ण एपीआई बनाए रखें, खासकर यदि आपकी टीम में रूकी डेवलपर्स हैं।

ऐसा करना बेहद सरल है:

/// Since the current way to qualify a class from within its ruleset is quite /// ugly, here is a mixin providing a friendly API to do so. /// @author Hugo Giraudel /// @param (String) $element-selector - Element selector @mixin qualify($element-selector) ( @at-root #($element-selector + &) ( @content; ) )

अब, हमारे पिछले स्निपेट को फिर से लिखना:

.button ( @include qualify(a) ( // Specific styles for `a.button` ) )

बहुत बेहतर, है ना? फिर भी, qualifyअनुभवहीन सास टिंकरर्स के लिए थोड़ा मुश्किल लग सकता है। जब आप अधिक वर्णनात्मक नाम, जैसे कि एक उपनाम प्रदान कर सकते हैं when-is।

/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )

एक अंतिम उदाहरण:

.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )