SASS में मिक्सिन्स

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

हम SASS में मिक्सिन्स को प्रैक्टिकल उदाहरणों के साथ समझाएंगे।

YouTube Video

SASS में मिक्सिन्स

सारांश – मिक्सिन क्या है?

मिक्सिन एक तंत्र है जो आपको आमतौर पर उपयोग किए जाने वाले स्टाइल गुणों के सेट को पुन: प्रयोज्य फ़ंक्शनों के रूप में परिभाषित करने की अनुमति देता है, जिन्हें आप जहां आवश्यकता हो वहां कॉल कर सकते हैं। ये आपके CSS क्लासेस और कई प्रॉपर्टीज़ को DRY (Don’t Repeat Yourself) बनाए रखने के लिए बहुत उपयोगी हैं।

उदाहरण: सबसे सरल मिक्सिन

नीचे एक सरल मिक्सिन का उदाहरण है जो border-radius और box-shadow दोनों को साथ में रीउस करता है। इस मिक्सिन को कॉल करके, आप एक ही अपीयरेंस को कई एलिमेंट्स में अप्लाई कर सकते हैं।

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8.card {
 9  @include card-style;
10  padding: 1rem;
11}

• इस मिक्सिन के साथ, आपको स्टाइल्स को सीधे-सीधे बार-बार लिखने की आवश्यकता नहीं है।
• इसे कॉल करने के लिए केवल एक लाइन की जरूरत है: @include card-style;।

आर्गुमेंट्स (पैरामीटर्स) वाले मिक्सिन्स

मिक्सिन्स, फंक्शन्स की तरह ही, आर्गुमेंट्स स्वीकार कर सकते हैं। इससे आप एक ही लॉजिक के साथ अपीयरेंस को बदल सकते हैं। अगला उदाहरण है जिसमें रंग को एक आर्गुमेंट के रूप में लिया जाता है।

 1// Mixin with parameters: accepts a color and optional radius
 2@mixin colored-box($bg-color, $radius: 4px) {
 3  background-color: $bg-color;
 4  border-radius: $radius;
 5  padding: 0.75rem;
 6}
 7
 8.box-primary {
 9  @include colored-box(#007acc);
10}
11
12.box-custom {
13  @include colored-box(#ffcc00, 12px);
14}

• डिफ़ॉल्ट वैल्यू देकर, आप उस स्थिति में व्यवहार को नियंत्रित कर सकते हैं जब कोई आर्गुमेंट छोड़ दिया जाए।
• इस उदाहरण में डिफ़ॉल्ट रेडियस का उपयोग होता है और केवल बैकग्राउंड रंग को ओवरराइट किया जाता है।

वे केस जहाँ वैरिएडिक आर्गुमेंट्स (...) का उपयोग किया जाता है

जब आप कई वैल्यूज़ स्वीकार करना चाहते हैं, तो आप वैरिएडिक आर्गुमेंट्स ($args...) का उपयोग कर सकते हैं। यह यूटिलिटी क्लासेज़ बनाने या फॉलबैक लिस्ट पास करने के लिए उपयोगी है।

यह तब मददगार होता है जब आपको एक साथ कई फॉन्ट फैमिली या शैडो वैल्यू पास करनी हों।

1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3  box-shadow: $shadows;
4}
5
6.panel {
7  @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}

• कॉल करने की तरफ से, आप कॉमा से अलग किए गए कई शैडोज़ पास कर सकते हैं।
• इस तरह, आप एक ही मिक्सिन का उपयोग सरल और जटिल दोनों प्रकार के शैडोज़ के लिए कर सकते हैं।

@content के साथ मिक्सिन्स — एक ब्लॉक प्राप्त करना

@content के साथ, कोई मिक्सिन कॉलर से स्टाइल्स का एक ब्लॉक प्राप्त कर सकता है। इससे मिक्सिन एक सामान्य रैपर प्रदान कर सकता है, जबकि अंदरूनी डिटेल्स कॉलर से आती हैं।

 1// Mixin that sets up a responsive container and yields to caller via @content
 2@mixin responsive-container($max-width: 1200px) {
 3  margin-left: auto;
 4  margin-right: auto;
 5  padding-left: 1rem;
 6  padding-right: 1rem;
 7  max-width: $max-width;
 8
 9  @content; // place where caller's styles are inserted
10}
11
12.header {
13  @include responsive-container(1000px) {
14    display: flex;
15    align-items: center;
16    justify-content: space-between;
17  }
18}

• कॉल करने की ओर, आप @include के साथ एक ब्लॉक जोड़ सकते हैं, जिससे अंदर स्टाइल्स डाली जा सकती हैं।
• यह पैटर्न ग्रिड्स, कार्ड्स और फॉर्म्स जैसे लेआउट रैपर्स के लिए उपयोगी है।

कंडीशनल्स और लूप्स का उपयोग करते हुए एडवांस्ड मिक्सिन्स

@if और @for जैसे कंट्रोल स्ट्रक्चर्स का उपयोग मिक्सिन्स के भीतर किया जा सकता है। इनका उपयोग यूटिलिटी जनरेशन को ऑटोमेट करने और उत्तरदायी सेटिंग्स को समूहित करने के लिए किया जा सकता है।

नीचे यूटिलिटी क्लास की चौड़ाई स्वचालित रूप से उत्पन्न करने का उदाहरण दिया गया है।

 1@use 'sass:math';
 2
 3// Mixin that generates width utility classes from a list of fractions
 4@mixin generate-widths($fractions) {
 5  @each $name, $fraction in $fractions {
 6    .w-#{$name} {
 7      width: math.percentage($fraction);
 8    }
 9  }
10}
11
12$widths: (
13  '1-4': 0.25,
14  '1-3': 0.3333,
15  '1-2': 0.5,
16  '3-4': 0.75
17);
18
19@include generate-widths($widths);

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

मिक्सिन्स बनाम प्लेसहोल्डर्स (%placeholder)

जहाँ मिक्सिन सीधे एक गुणों का सेट सम्मिलित करते हैं, वहीं स्टाइल विरासत में लेने के लिए प्लेसहोल्डर का उपयोग @extend के साथ किया जाता है। कुछ मामलों में मिक्सिन डुप्लिकेट CSS जनरेट कर सकते हैं, लेकिन @extend कुछ स्थितियों में अधिक संक्षिप्त CSS तैयार कर सकता है।

प्रत्येक तरीके से जनरेट होने वाले CSS के उद्देश्य और अंतर को समझकर, आप सबसे उपयुक्त तरीका चुन सकते हैं।

 1// Placeholder example (for comparison)
 2%btn-base {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn-primary {
 9  @extend %btn-base;
10  background: #007acc;
11  color: #fff;
12}
13
14.btn-secondary {
15  @extend %btn-base;
16  background: #e0e0e0;
17}

• जब आप किसी प्लेसहोल्डर को @extend करते हैं, तो कई सेलेक्टर्स एक नियम में समेकित हो सकते हैं, जिससे CSS और भी संक्षिप्त हो जाती है।
• वहीं दूसरी ओर, क्योंकि मिक्सिन जहां आवश्यकता हो वहां सीधे गुण जोड़ते हैं, वे लचीलापन प्रदान करते हैं और अनजाने में सेलेक्टर के संयोजन से बचने में मदद करते हैं।

आम प्रैक्टिकल पैटर्न्स (रिस्पॉन्सिव, वेंडर प्रीफिक्स आदि)

प्रैक्टिकल रूप में, वेंडर प्रीफिक्स और रिस्पॉन्सिव फीचर्स जैसी सामान्य प्रोसेसिंग को मिक्सिन्स में रखना उपयोगी है। नीचे एक उदाहरण है जिसमें transform और prefix प्रॉपर्टीज़ को जोड़ा गया है। आप ब्राउज़र संगतता के लिए कोड को केंद्रीकृत कर सकते हैं, जिससे रखरखाव आसान होता है।

 1// Mixin for transform with vendor prefixes
 2@mixin transform($value) {
 3  -webkit-transform: $value;
 4  -ms-transform: $value;
 5  transform: $value;
 6}
 7
 8.icon-rotate {
 9  @include transform(rotate(45deg));
10}

• इसका उपयोग सरल है और आप इसे कहीं भी उपयोग कर सकते हैं, जैसे कि @include transform(rotate(10deg));।
• भले ही भविष्य में प्रीफ़िक्स की आवश्यकता न रहे, लेकिन रखरखाव आसान हो जाता है क्योंकि मिक्सिन को अपडेट करने से बदलाव आपके पूरे कोडबेस में लागू हो जाता है।

प्रैक्टिकल उदाहरण: कार्ड्स और बटन मिलाकर

नीचे एक उदाहरण दिया गया है जिसमें कार्ड के भीतर उपयोग किए गए बटन शैलियों को एक मिक्सिन के साथ統一 किया गया है, जिससे उन्हें थीम रंग के अनुसार बदला जा सकता है।

यह सामान्यतः प्रयुक्त 'कार्ड + बटन' पैटर्न को मिक्सिन्स के जरिये व्यवस्थित करता है।

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8// Mixin for transform with vendor prefixes
 9@mixin transform($value) {
10  -webkit-transform: $value;
11  -ms-transform: $value;
12  transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17  display: inline-block;
18  padding: $padding;
19  background: $bg;
20  color: $color;
21  border-radius: 6px;
22  text-decoration: none;
23  cursor: pointer;
24  @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29  @include card-style; // reuse earlier card-style mixin
30  padding: $gap;
31  @content;
32}
33
34.card-feature {
35  @include card {
36    .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37    .cta {
38      @include btn(#007acc);
39    }
40  }
41}
42
43.card-warning {
44  @include card {
45    .title { font-weight: bold; }
46    .cta {
47      @include btn(#ff6600);
48    }
49  }
50}

• इन मिक्सिन्स का उपयोग करके, आप कम्पोनेंट्स को संक्षिप्त रूप से लिख सकते हैं।

परफॉर्मेंस और जेनरेटेड CSS पर ध्यान दें

चूंकि मिक्सिन्स हर बार कॉल होने पर प्रॉपर्टीज़ जोड़ते हैं, इसलिए एक ही नियम के लिए बार-बार @include का उपयोग आपकी फाइनल CSS को बड़ा बना सकता है। आप आवश्यकता होने पर इन्हें प्लेसहोल्डर और कम्पोनेंट डिज़ाइन के साथ मिलाकर ऑप्टिमाइज कर सकते हैं।

इसके अलावा, निम्नलिखित उपाय भी प्रभावी हैं।

• अक्सर उपयोग की जाने वाली शैलियों को पुनः उपयोग के लिए कक्षाओं (क्लासेस) में बनाया जाना चाहिए।
• सामान्य पैटर्नों को @content का उपयोग करके एकत्रित करना चाहिए।
• जटिल यूटिलिटीज़ का निर्माण केवल बिल्ड समय पर ही किया जाना चाहिए।

आसान डिबगिंग के लिए टिप्स

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

साथ ही, सोर्स मैप्स को सक्षम करने से आप आसानी से पता कर सकते हैं कि किस मिक्सिन ने कौन-सा CSS उत्पन्न किया है, जिससे समस्याओं को अलग करना आसान हो जाता है।

नीचे एक आसान-से-समझने वाले मिक्सिन का उदाहरण है जिसमें दस्तावेज़ीकरण टिप्पणियाँ शामिल हैं।

1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6  outline: none;
7  box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}

• ऐसी सुव्यवस्थित दस्तावेज़ टिप्पणियों से टीम के भीतर साझा करना और समझना आसान हो जाता है।
• चूंकि SASS दस्तावेज़ीकरण टिप्पणियों को अनुकूल उपकरणों द्वारा स्वचालित रूप से निकाला जा सकता है, वे शैली गाइड जैसे दस्तावेज़ उत्पन्न करने में भी सहायक होती हैं।

सारांश

चूंकि मिक्सिन्स आपको सामान्य रूप से इस्तेमाल की जाने वाली स्टाइल्स को रीउस के लिए एक साथ जोड़ने की सुविधा देते हैं, ये कोड की डुप्लीकेशन को घटाते हैं और रखरखाव को बेहतर बनाते हैं। साथ ही, जब कई सेलेक्टर्स एक ही नियम साझा करते हैं, तो सिर्फ मिक्सिन्स ही नहीं, बल्कि @extend (प्लेसहोल्डर) का भी उपयोग करें। इसके अलावा, भले ही @content से लेआउट रैपर्स और कंटेंट का फ्लेक्सिबल पृथक्करण संभव होता है, ज़रूरत से ज़्यादा @include के उपयोग से CSS फाइल बड़ी हो सकती है, इसलिए सावधानी रखें। आर्गुमेंट्स, डिफ़ॉल्ट वैल्यूज़ और वैरिएडिक आर्गुमेंट्स का पूर्ण उपयोग कर के ऐसा मिक्सिन डिज़ाइन करना ज़रूरी है जो सामान्य हो और आसानी से विस्तारित किया जा सके।

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

YouTube Video