SASS मॉड्यूल्स

यह लेख SASS मॉड्यूल्स को समझाता है।

@use और @forward का उपयोग करके SASS को कैसे मॉड्यूलराइज़ करें, और वेरिएबल्स, मिक्सिन्स, फंक्शन्स, थीम सेटिंग्स, और पब्लिक API को फिर से कैसे उपयोग करें, हम इसे समझाते हैं।

YouTube Video

SASS मॉड्यूल्स

SASS का मॉड्यूल सिस्टम स्टाइल्स को स्पष्ट रूप से सीमित करने में मदद करता है और एक ऐसा डिज़ाइन प्रदान करता है जिसे फिर से उपयोग करना और बनाए रखना आसान होता है।

मॉड्यूल्स की बुनियादी अवधारणाएँ

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

उदाहरण फ़ाइल संरचना

पहले, यहाँ यथार्थवादी परियोजना संरचना का एक उदाहरण है। नीचे एक छोटे डिज़ाइन सिस्टम का उदाहरण है।

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• यह संरचना मॉड्यूलर बनाना, साथ ही परीक्षण और भागों को बदलना आसान बनाती है।
• आंशिक (partial) फ़ाइलों के नाम की शुरुआत में अंडरस्कोर होता है।

@use की मूल बातें

@use एक मॉड्यूल लोड करता है और एक नेमस्पेस प्रदान करता है। यह नाम की टकराव को रोकता है और स्रोत मॉड्यूल को स्पष्ट करता है।

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• यह फ़ाइल एक साधारण है जो केवल वेरिएबल्स परिभाषित करती है। एक मॉड्यूल से प्रकाशित वेरिएबल्स को सीधे @use के ज़रिए संदर्भित किया जा सकता है।

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• यहाँ, variables मॉड्यूल को variables. नेमस्पेस के साथ संदर्भित किया गया है। यह तरीका प्रत्येक आइटम की उत्पत्ति को स्पष्ट बना देता है।

नेमस्पेस को छोटा करना या उपनाम देना

as का उपयोग करके आप नेमस्पेस को छोटा कर सकते हैं।

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• यह vars छोटे उपनाम का उपयोग करके variables आयात करने का उदाहरण है। नाम का चयन करें कि आप पढ़ने-योग्यता को प्राथमिकता देते हैं या टाइपिंग में आसानी को।

मिक्सिन परिभाषा

मिक्सिन्स और फंक्शन्स को भी मॉड्यूल्स के अंदर परिभाषित और उपयोग किया जा सकता है। प्रोजेक्ट के कन्वेंशन के अनुसार कमेंट्स रखना स्पष्टता में मदद करता है।

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• यह फ़ाइल कंटेनर्स के लिए एक मिक्सिन परिभाषित करती है। यह आर्गुमेंट्स लेता है और डिफ़ॉल्ट मान देता है।

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• यह @include के साथ मिक्सिन का उपयोग करने का उदाहरण है।

फंक्शन्स की परिभाषा करना

फंक्शन्स को वैल्यू लौटाने के लिए इस्तेमाल किया जाता है, और इन्हें मॉड्यूल्स के अंदर परिभाषित और फिर से उपयोग किया जा सकता है। डिज़ाइन वैल्यू के लिए गणनाओं को फंक्शन्स में संलग्न करके, स्टाइल्स अधिक स्थिर और बनाए रखने में आसान हो जाते हैं।

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• यह फ़ाइल एक ऐसा फंक्शन परिभाषित करती है जो पिक्सेल वैल्यू को rem में बदलता है। एक डिफ़ॉल्ट बेस वैल्यू भी निर्दिष्ट की गई है।

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• यहाँ एक फंक्शन को @use के माध्यम से कॉल करने और परिणाम को एक स्टाइल में लागू करने का उदाहरण है।

मॉड्यूल निर्यात और @forward (API डिजाइन)

जब आप कई आंतरिक फ़ाइलों को बाहरी रूप से दिखाना चाहते हैं, तो आप 'public API' बनाने के लिए @forward का उपयोग कर सकते हैं।

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• कई आंतरिक फ़ाइलों को एक एकल एंट्री पॉइंट के रूप में समूहित किया जा सकता है, जो फिर सार्वजनिक API प्रदान करता है। यह उपभोक्ताओं को केवल एक एंट्री पॉइंट आयात करके सभी आवश्यक फीचर्स तक पहुंचने देता है।

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• variables और mixins के कंटेंट्स को संयुक्त रूप से index के ज़रिए एक्सेस किया जाता है। @forward index को सार्वजनिक लेयर बनाता है।

@forward के show / hide विकल्पों के साथ API को नियंत्रित करना

अगर आप केवल कुछ विशेष वेरिएबल्स दिखाना चाहते हैं, तो show या hide विकल्प का उपयोग करें।

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• !default जोड़ने से आप ऐसी वैल्यू प्रकाशित कर सकते हैं जिसे बदला जा सकता है।

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• @forward के साथ show का प्रयोग करके आप केवल आवश्यक तत्वों तक सीमित API दिखा सकते हैं। आंतरिक रूप से उपयोग की गई वेरिएबल्स और फंक्शन्स बाहर से दिखाई नहीं देंगे।

मॉड्यूल्स को कॉन्फ़िगर करने योग्य बनाना (with के साथ)

अगर आप मॉड्यूल में !default का उपयोग करते हैं, तो इंपोर्ट करते समय with से मान बदले जा सकते हैं।

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• !default से डिफ़ॉल्ट मान वाला मॉड्यूल with के ज़रिए कॉन्फ़िगरेशन स्वीकार कर सकता है।

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

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

व्यावहारिक उदाहरण: बटन कॉम्पोनेंट (पूरा उदाहरण)

आइए मॉड्यूल्स का उपयोग करके बटन स्टाइल डिज़ाइन करने का प्रयास करें। पहले, वेरिएबल्स और मिक्सिन्स को उनके अपने मॉड्यूल्स में अलग करें।

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• यहाँ बटन के लिए डिफ़ॉल्ट वेरिएबल्स परिभाषित हैं। !default का उपयोग करके उपभोक्ता इन मूल्यों को ओवरराइड कर सकते हैं।

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• यहाँ बटन के लिए बेस मिक्सिन परिभाषित है। वे आसान पुन: उपयोग के लिए अलग किए गए हैं।

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• बटन स्टाइल्स को नेमस्पेस रेफरेंस के साथ @use का उपयोग करके बनाया जाता है। एक वेरिएंट .button--large के रूप में परिभाषित किया गया है।

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• button मॉड्यूल आयात करके आप तुरंत बटन स्टाइल्स का उपयोग कर सकते हैं।

थीम बदलना (कई थीम फ़ाइलों का उपयोग करना)

थीम बदलना with के ज़रिए कॉन्फ़िगरेशन द्वारा या अलग-अलग मॉड्यूल्स बनाकर और @use में कौन सा उपयोग हो रहा है, ये बदलकर किया जा सकता है।

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• ब्रांड रंग और अन्य सेटिंग्स को कई थीम फ़ाइलों में परिभाषित करें और उन्हें बिल्ड या इंपोर्ट के समय बदलें।

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• थीम का चयन with का उपयोग करके या इंपोर्ट करके करें, जैसे बिल्ड प्रक्रिया के दौरान @use 'themes/light'।

प्राइवेट और पब्लिक (अंडरस्कोर प्रीफ़िक्स और !default)

SASS में, फ़ाइल नाम की शुरुआत में अंडरस्कोर जोड़ना उसे आंशिक (partial) के रूप में चिह्नित करता है। हालाँकि, मॉड्यूल एक्सपोर्ट की विज़िबिलिटी को प्रबंधित करते समय, @forward के साथ show और hide का उपयोग करें।

आप @forward का उपयोग करके सार्वजनिक API व्यवस्थित कर सकते हैं और आंतरिक कार्यान्वयन को बाहर से छिपा सकते हैं।

वास्तविक दुनिया में उपयोग के लिए सर्वोत्तम अभ्यास

नीचे कुछ बुनियादी अवधारणाएँ दी गई हैं जो SASS का व्यावहारिक रूप में उपयोग करते समय उपयोगी होती हैं। ये सभी दिशा-निर्देश विकास के दौरान भ्रम को कम करने और कोड को व्यवस्थित रखने में मदद करेंगे।

• अगर वेरिएबल थीम का हिस्सा बदल सकती है, तो उसमें !default जोड़ें। यह उपयोगकर्ताओं के लिए मानों को अधिलेखित (override) करना आसान बनाता है।
• मॉड्यूल्स को जिम्मेदारी के आधार पर बांटना चाहिए और एक ही उद्देश्य पर ध्यान केंद्रित करना चाहिए। वेरिएबल्स, मिक्सिन्स, और कम्पोनेंट्स को अलग करके प्रबंधन करना आसान हो जाता है।
• @forward के साथ सार्वजनिक सामग्री प्रबंधित करें और आवश्यकतानुसार show या hide का उपयोग करें। क्या सार्वजनिक है, इसका दायरा परिभाषित करना डिजाइन को अधिक सुरक्षित बनाता है।
• नेमस्पेस का उपयोग करें ताकि यह स्पष्ट हो सके कि प्रत्येक फंक्शन किस मॉड्यूल से संबंधित है। यह अन्य कोड से भ्रम को रोकता है।
• ध्यान रखें कि with केवल @use के समय काम करता है। क्योंकि आप बाद में उन्हें नहीं बदल सकते, तो इंपोर्ट करते समय कॉन्फ़िगरेशन सेट करें।
• फ़ाइलनाम की शुरुआत में अंडरस्कोर लगाएँ ताकि वे partial बन जाएँ, और व्यक्तिगत रूप से कंपाइल न हों। यह फाइलों को बड़ी संरचना में जोड़ना आसान बनाता है।
• index मॉड्यूल में उपयोग उदाहरण शामिल करना परीक्षण और दस्तावेज़ीकरण में सहायक होता है। यूज़र्स के लिए व्यवहार को समझना आसान हो जाता है।

इन बातों का ध्यान रखने से आप बड़े प्रोजेक्ट्स को प्रबंधित कर सकते हैं और टीम के रूप में पठनीय कोड बनाए रख सकते हैं।

सारांश

SASS मॉड्यूल सिस्टम नेमस्पेस, पब्लिक API और आसान कॉन्फ़िगरेशन के माध्यम से स्टाइल कोड को व्यवस्थित करता है। @use और @forward का कुशलतापूर्वक उपयोग टीम डेवलपमेंट, थीम बदलने और लाइब्रेरी डिज़ाइन को बहुत आसान बना देता है।

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

YouTube Video