SASS में इनहेरिटेंस

यह लेख SASS में इनहेरिटेंस को समझाता है।

हम व्यावहारिक उदाहरणों के साथ SASS में इनहेरिटेंस को समझाएंगे।

YouTube Video

SASS में इनहेरिटेंस

SASS में इनहेरिटेंस (@extend) एक ऐसी प्रक्रिया है जिससे आप एक सेलेक्टर की स्टाइल को दूसरे पर बिना डुप्लिकेशन के लागू कर सकते हैं। चूंकि एक ही स्टाइल्स को 'कंबाइन' करके कई एलिमेंट्स के लिए आउटपुट किया जाता है, इसलिए अंतिम CSS में दोहराव की संभावना कम होती है; लेकिन यदि सही तरीके से उपयोग न किया जाए तो यह अनचाहे सेलेक्टर मर्जिंग का कारण बन सकता है।

बुनियादी बातें: @extend का उपयोग कैसे करें

नीचे एक बुनियादी उदाहरण है जिसमें .btn--primary, .btn की स्टाइल्स इनहेरिट करता है। @extend एक निर्देश है जो टार्गेट सेलेक्टर को बढ़ाता है।

 1// Base button styles
 2.btn {
 3  padding: 0.5rem 1rem;
 4  border-radius: 4px;
 5  border: 1px solid #ccc;
 6  background: white;
 7  color: #333;
 8}
 9
10/* Primary button extends the base .btn */
11.btn--primary {
12  @extend .btn;
13  background: #007bff;
14  color: white;
15}

• @extend का उपयोग करके, .btn--primary बेस की स्टाइल्स को इनहेरिट करता है और केवल आवश्यक हिस्सों को ओवरराइड करता है।

बनाई गई CSS

 1.btn, .btn--primary {
 2  padding: 0.5rem 1rem;
 3  border-radius: 4px;
 4  border: 1px solid #ccc;
 5  background: white;
 6  color: #333;
 7}
 8
 9.btn--primary {
10  background: #007bff;
11  color: white;
12}

सर्वश्रेष्ठ तरीका: प्लेसहोल्डर (%placeholder) का उपयोग

प्लेसहोल्डर चयनकर्ता (%name) वे चयनकर्ता हैं जो CSS में आउटपुट नहीं होते। इनका व्यापक रूप से उपयोग किया जाता है, खासकर जब आप कई कॉम्पोनेंट्स के बीच विरासत के लिए सामान्य स्टाइल्स को सुरक्षित रूप से साझा करना चाहते हैं।

 1// %placeholder will not be output directly
 2%card-base {
 3  padding: 1rem;
 4  border-radius: 6px;
 5  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 6  background: #fff;
 7}
 8
 9/* Components extend the placeholder */
10.card {
11  @extend %card-base;
12  border: 1px solid #eee;
13}
14
15.panel {
16  @extend %card-base;
17  border: 1px solid #ddd;
18}

• .card और .panel दोनों %card-base से इनहेरिट करते हैं, जिससे वे सामान्य स्टाइल्स साझा करते हुए अपनी अलग विशेषताएँ जोड़ सकते हैं।

बनाई गई CSS

 1.card, .panel {
 2  padding: 1rem;
 3  border-radius: 6px;
 4  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 5  background: #fff;
 6}
 7
 8.card {
 9  border: 1px solid #eee;
10}
11
12.panel {
13  border: 1px solid #ddd;
14}

मल्टीपल इनहेरिटेंस (कई @extend)

आप एक ही समय में कई प्लेसहोल्डर्स या क्लास को इनहेरिट कर सकते हैं। हालांकि स्टाइल का पुन: उपयोग बढ़ जाता है, यह ट्रैक रखना महत्वपूर्ण है कि कौनसे नियम किन चयनकर्ताओं के साथ मिलाए गए हैं।

 1%btn-base {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  border-radius: 3px;
 5}
 6
 7%btn-large {
 8  padding: 0.75rem 1.5rem;
 9  font-size: 1.125rem;
10}
11
12/* Composite button that extends both placeholders */
13.btn--lg {
14  @extend %btn-base;
15  @extend %btn-large;
16  background: #222;
17  color: #fff;
18}

• यह एक उदाहरण है जिसमें एक बटन दो प्लेसहोल्डर इनहेरिट करता है, एक 'बेस' के लिए और एक 'आकार' के लिए।
• .btn--lg, %btn-base और %btn-large दोनों को इनहेरिट करता है, जिससे बुनियादी लेआउट बड़ी साइजिंग के साथ जुड़ जाता है।

बनाई गई CSS

1.btn--lg {
2  display: inline-block;
3  /* %btn-large overrides the padding from %btn-base */
4  padding: 0.75rem 1.5rem;
5  border-radius: 3px;
6  font-size: 1.125rem;
7  background: #222;
8  color: #fff;
9}

@extend का व्यवहार (मर्ज तंत्र) और 'सेलेक्टर एक्सप्लोजन' के बारे में सावधानियाँ

@extend सभी मेल खाते सेलेक्टर्स को एक साथ मर्ज करके आउटपुट करता है, जिससे कभी-कभी अनचाहे सेलेक्टर संयोजन बन सकते हैं।

निम्नलिखित उदाहरण दिखाता है कि जब एक ही बेस क्लास को कई जगह एक्सटेंड किया जाता है तो आउटपुट कितना बढ़ सकता है।

 1/* Many components extend .utility */
 2/* A generic utility class */
 3.utility {
 4  margin-bottom: 1rem;
 5}
 6
 7/* Nested selectors that extend .utility */
 8.header {
 9  @extend .utility;
10  .title {
11    font-weight: bold;
12  }
13}
14
15.footer {
16  @extend .utility;
17  .note {
18    color: #888;
19  }
20}
21
22.article {
23  @extend .utility;
24  .content {
25    line-height: 1.6;
26  }
27}
28
29.sidebar {
30  @extend .utility;
31  .section {
32    padding: 1rem;
33  }
34}

• जब कई कंपोनेंट्स, .utility को इनहेरिट करते हैं, तो सेलेक्टर्स एक में मर्ज हो जाते हैं और बड़े प्रोजेक्ट्स में यह CSS को अत्यधिक बढ़ा सकता है।

बनाई गई CSS

 1.utility,
 2.header,
 3.footer,
 4.article,
 5.sidebar {
 6  margin-bottom: 1rem;
 7}
 8
 9.header .title {
10  font-weight: bold;
11}
12
13.footer .note {
14  color: #888;
15}
16
17.article .content {
18  line-height: 1.6;
19}
20
21.sidebar .section {
22  padding: 1rem;
23}

@extend और .class बनाम एलिमेंट सेलेक्टर्स (टैग) — प्राथमिकता और साइड इफेक्ट्स

@extend न केवल क्लासों पर बल्कि एलिमेंट चयनकर्ताओं पर भी लागू किया जा सकता है। हालांकि, एलिमेंट्स को बढ़ाने से प्रभावित क्षेत्र बढ़ जाता है, जिससे नियम अनचाहे स्थानों पर अनजाने में लागू होने का जोखिम बढ़ता है।

नीचे एक एलिमेंट सेलेक्टर को एक्सटेंड करने का उदाहरण और उससे होने वाला असर है।

 1/* Extending an element selector (not recommended) */
 2h1 {
 3  font-size: 2rem;
 4  margin-bottom: 0.5rem;
 5}
 6
 7/* If you extend h1, the resulting selector will include your class with h1 */
 8.title {
 9  @extend h1;
10  color: #333;
11}
12
13/* Output becomes:
14h1, .title { font-size: 2rem; margin-bottom: 0.5rem; }
15*/

• इस उदाहरण में, h1 एलिमेंट सेलेक्टर को इनहेरिट करने के कारण .title वही स्टाइल्स मर्ज कर लेता है जो h1 के पास हैं।
• छोटे स्तर पर यह सुविधाजनक लग सकता है, लेकिन जैसे जैसे आपका प्रोजेक्ट बढ़ता है, h1 के नियम अनजाने में .title के साथ मिल सकते हैं, जिससे स्टाइल्स जटिल हो जाते हैं और रखरखाव कम हो जाता है। इसलिए, स्टाइल्स को मुख्य रूप से क्लासों और प्लेसहोल्डर के इर्द-गिर्द डिज़ाइन करना उन्हें बनाए रखने में आसान बनाता है।

बनाई गई CSS

1h1,
2.title {
3  font-size: 2rem;
4  margin-bottom: 0.5rem;
5}
6
7.title {
8  color: #333;
9}

@extend और !optional के उपयोग के मामले

अगर आप @extend के साथ !optional का उल्लेख करते हैं, तो जब विरासत लक्षित नहीं होगा, तो आप त्रुटियों को दबा सकते हैं। यह विशेष रूप से लाइब्रेरी जैसे कोड या उन मामलों में उपयोगी है जहां प्लेसहोल्डर शर्तों के अनुसार परिभाषित किए जाते हैं।

निम्नलिखित एक उदाहरण है जिसमें !optional के साथ ऐसी क्लास को सुरक्षित रूप से इनहेरिट करने का प्रयास किया गया है जो संभवतः मौजूद नहीं है।

1/* Try to extend a class that might not exist */
2.component {
3  @extend .maybe-existing !optional;
4  padding: 1rem;
5}

• अगर .maybe-existing मौजूद नहीं है, तो कुछ नहीं होता और इसे छोड़ दिया जाता है। जब आप सुरक्षित रूप से एक्सटेंशन करना चाहते हैं तो इसका उपयोग करें।

बनाई गई CSS

1.component {
2  padding: 1rem;
3}

@extend और मिक्सिन्स (@mixin / @include) की तुलना

@extend और @mixin का उद्देश्य कई बार मिलता-जुलता होता है, लेकिन उनका आउटपुट और उपयोग अलग-अलग होते हैं।

• @extend

  • बनी हुई CSS सेलेक्टर्स को मर्ज करके दोहराव को कम करती है।
  • क्योंकि सेलेक्टर्स जनरेशन के बाद मर्ज किए जाते हैं, इसलिए अनचाहे संयोजन हो सकते हैं।
  • पैरामीटर पास नहीं किए जा सकते (हालाँकि इसे प्लेसहोल्डर्स को मिलाकर पूरा किया जा सकता है)।

• @mixin / @include

  • हर कॉल स्टाइल्स को डुप्लिकेट कर देती है (जिससे अनावश्यक आउटपुट होता है)।
  • आप पैरामीटर पास कर सकते हैं और कंडीशनल या लूप जैसी लॉजिक भी शामिल कर सकते हैं।
  • आउटपुट अधिक अनुमानित रहता है, लेकिन फाइल का आकार बढ़ जाता है।

नीचे एक तुलना है जिसमें @mixin और @extend दोनों का उपयोग करके एक जैसी बटन स्टाइल्स लागू की गई हैं।

 1/* Mixin approach */
 2@mixin btn-styles($bg, $color) {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  background: $bg;
 6  color: $color;
 7  border-radius: 4px;
 8}
 9
10/* Use mixin */
11.btn {
12  @include btn-styles(white, #333);
13}
14
15.btn--primary {
16  @include btn-styles(#007bff, white);
17}
18
19/* Extend approach (shared placeholder) */
20%btn-base {
21  display: inline-block;
22  padding: 0.5rem 1rem;
23  border-radius: 4px;
24}
25
26.btn2 {
27  @extend %btn-base;
28  background: white;
29  color: #333;
30}
31
32.btn2--primary {
33  @extend %btn-base;
34  background: #007bff;
35  color: white;
36}

• @mixin आपको लचीले ढंग से स्टाइल्स डालने देता है, जबकि @extend आउटपुट को कुशलतापूर्वक जोड़ता है, इसलिए आवश्यकता के अनुसार आप दोनों का इस्तेमाल कर सकते हैं।

बनाई गई CSS

@mixin से आउटपुट

 1.btn {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  background: white;
 5  color: #333;
 6  border-radius: 4px;
 7}
 8
 9.btn--primary {
10  display: inline-block;
11  padding: 0.5rem 1rem;
12  background: #007bff;
13  color: white;
14  border-radius: 4px;
15}

@extend से आउटपुट

 1.btn2,
 2.btn2--primary {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn2 {
 9  background: white;
10  color: #333;
11}
12
13.btn2--primary {
14  background: #007bff;
15  color: white;
16}

व्यावहारिक दिशानिर्देश

SASS में विरासत स्टाइल के पुन: उपयोग को बढ़ाने के लिए एक शक्तिशाली विशेषता है। हालाँकि, गलत उपयोग से स्टाइल मर्जिंग जटिल हो सकती है और मेंटेनबिलिटी कम हो सकती है। नीचे विरासत का सुरक्षित और कुशलता से उपयोग करने के कुछ प्रमुख बिंदु दिए गए हैं।

• संरचना और लेआउट जैसे पूरी तरह से सामान्य घटक स्टाइल के लिए प्लेसहोल्डर का उपयोग करें। इसके अलावा, यदि डायनामिक पैरामीटराइजेशन आवश्यक है, तो आप @mixin का उपयोग कर सकते हैं।
• आपको सीधे HTML एलिमेंट्स जैसे h1 को विरासत में लेना टालना चाहिए। अनजाने में चयनकर्ता संयोजन हो सकते हैं, जिससे आकस्मिक CSS जनरेट हो सकता है।
• BEM जैसी नेमिंग कन्वेंशन या स्पष्ट प्रीफिक्स का उपयोग करके यह दिखाएं कि हर प्लेसहोल्डर किसके लिए है, इससे चीज़ें सुरक्षित रहती हैं।
• @extend का उपयोग एक ही फ़ाइल में करना अधिक सुरक्षित होता है। खासकर बड़े प्रोजेक्ट्स में, प्रत्येक कॉम्पोनेंट के दायरे में विरासत डिज़ाइन करना सलाहकार होता है ताकि विरासत संबंधों को ट्रैक करना आसान हो सके।

सारांश

SASS में @extend फीचर सामान्य स्टाइल्स का कुशलतापूर्वक पुन: उपयोग करने और डिज़ाइन स्थिरता सुनिश्चित करने का एक सुविधाजनक तरीका है। हालांकि, चयनकर्ता संयोजन आसानी से जटिल हो सकते हैं, इसलिए इस फीचर का सावधानीपूर्वक और सीमित दायरे में उपयोग करना आवश्यक है। साझा स्टाइल्स को प्लेसहोल्डर चयनकर्ता (%placeholder) के साथ समूहबद्ध करके और डायनामिक पैरामीटर वाले हिस्सों के लिए @mixin का उपयोग करके, आप एक सरल और आसानी से बनाए रखने योग्य डिज़ाइन बनाए रख सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video