CSS Academy · पाठ

एक्सटेंड और प्लेसहोल्डर सिलेक्टर

@extend और मूक प्लेसहोल्डर सिलेक्टर का उपयोग करके सिलेक्टर के बीच शैलियाँ साझा करें।

पाठ 3, कुल 4 में से12 चरण

एक्सटेंड और प्लेसहोल्डर सिलेक्टर, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Sass में @extend

@extend एक चयनकर्ता को दूसरे चयनकर्ता की सभी स्टाइल विरासत में लेने देता है। कोड की नकल करने के बजाय, एक्सटेंड करने पर कंपाइल किए गए CSS में साझा नियम-समूह बनता है।

<div class="error">Error message</div>
  <div class="critical-error">Critical error message</div>

प्लेसहोल्डर चयनकर्ता

प्लेसहोल्डर चयनकर्ता (% से शुरू) स्टाइल का ऐसा ब्लॉक परिभाषित करता है, जिसे अपने आप कभी कंपाइल नहीं किया जाता — केवल एक्सटेंड किए जाने पर किया जाता है। जब तक कोई इसे एक्सटेंड न करे, यह कोई CSS नहीं बनाता।

<div class="product-card">Product card</div>
  <div class="profile-card">Profile card</div>

क्लास के बजाय प्लेसहोल्डर क्यों

किसी वास्तविक क्लास को एक्सटेंड करने पर उस क्लास का पूरा चयनकर्ता संदर्भ कंपाइल किए गए परिणाम में जुड़ जाता है। प्लेसहोल्डर अधिक साफ़ होते हैं — वे केवल एक्सटेंड करने वाले चयनकर्ताओं के लिए समूहित चयनकर्ता बनाते हैं।

@extend का कंपाइल किया गया परिणाम

जब कई चयनकर्ता एक ही प्लेसहोल्डर को एक्सटेंड करते हैं, तो Sass उन्हें कॉमा से अलग किए गए एक नियम में समूहित करता है:

<div class="product-card">Product card</div>
  <div class="profile-card">Profile card</div>

@extend की कमियाँ

@extend की कुछ महत्वपूर्ण सीमाएँ हैं:

मीडिया क्वेरी के अंदर इसका उपयोग नहीं किया जा सकता
एक्सटेंड की शृंखलाएँ बनने पर यह अप्रत्याशित और बड़े समूहित चयनकर्ता बना सकता है
कंपाइल किए गए CSS को स्रोत फ़ाइलों से जोड़कर समझना कठिन बना देता है

@extend बनाम मिक्सिन: समझौते

तुलना:

@extend: छोटा CSS (साझा नियम), लेकिन जटिल चयनकर्ता शृंखलाएँ और मीडिया क्वेरी की सीमाएँ
@mixin: घोषणाओं की नकल करता है, लेकिन अधिक पूर्वानुमेय है और मीडिया क्वेरी के अंदर उपयोग किया जा सकता है

मिक्सिन आमतौर पर बेहतर है

आधुनिक Sass अभ्यास में @extend की तुलना में मिक्सिन को सामान्यतः प्राथमिकता दी जाती है। HTTP/2 और gzip संपीड़न घोषणाओं की नकल को कम महत्वपूर्ण बनाते हैं, जबकि मिक्सिन को डीबग करने की सुविधा CSS के आकार में होने वाले मामूली अंतर से अधिक लाभकारी होती है।

@extend कब उपयोगी है

@extend (प्लेसहोल्डर के साथ) तब उपयुक्त है जब:

कई चयनकर्ता वास्तव में एक ही अर्थगत स्थिति साझा करते हों (जैसे, त्रुटि की स्थितियाँ)
आप मीडिया क्वेरी के अंदर न हों
आधार स्टाइल स्थिर और अच्छी तरह परिभाषित हों

प्लेसहोल्डर और थीमिंग

प्लेसहोल्डर उन रीसेट-जैसे यूटिलिटी सेट के लिए अच्छी तरह काम करते हैं, जिन्हें कई घटक विरासत में लेते हैं:

<a href="#" class="skip-link">Skip to content</a>
  <span class="sr-label">Screen reader label</span>

बहिष्करण संबंधी विचार

कुछ स्टाइल गाइड और टीमें @extend पर पूरी तरह प्रतिबंध लगाती हैं, क्योंकि यह जटिलता और चयनकर्ता के अनावश्यक विस्तार का कारण बन सकता है। इसके समझौतों को समझें और अपनी टीम के नियमों का पालन करें।

त्वरित जाँच

किसी सामान्य क्लास को एक्सटेंड करने और किसी प्लेसहोल्डर चयनकर्ता (%) को एक्सटेंड करने में क्या अंतर है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

@extend किसी चयनकर्ता को दूसरे चयनकर्ता की स्टाइल विरासत में लेने देता है और कंपाइल किए गए CSS में चयनकर्ताओं को समूहित करता है। प्लेसहोल्डर (%name) एक्सटेंड किए जाने तक कुछ भी कंपाइल नहीं करते — इसलिए वास्तविक क्लास को एक्सटेंड करने की तुलना में अधिक साफ़ होते हैं। मीडिया क्वेरी के अंदर @extend से बचें। आधुनिक Sass में पूर्वानुमेयता और डीबग करने की सुविधा के कारण मिक्सिन को सामान्यतः @extend पर प्राथमिकता दी जाती है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “एक्सटेंड और प्लेसहोल्डर सिलेक्टर” पाठ निःशुल्क है?

हाँ—“एक्सटेंड और प्लेसहोल्डर सिलेक्टर” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“एक्सटेंड और प्लेसहोल्डर सिलेक्टर” में मैं क्या सीखूँगा?

@extend और मूक प्लेसहोल्डर सिलेक्टर का उपयोग करके सिलेक्टर के बीच शैलियाँ साझा करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“एक्सटेंड और प्लेसहोल्डर सिलेक्टर” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ