SASS में `@forward`

यह लेख SASS में @forward के बारे में समझाता है।

@forward को सरल और समझने में आसान तरीके से समझाया जाएगा, जिसमें व्यावहारिक उदाहरण भी शामिल हैं।

YouTube Video

SASS में @forward

@forward क्या है?

SASS के मॉड्यूल सिस्टम में, आप @import की जगह @use और @forward का उपयोग करते हैं। @forward आपके आर्किटेक्चर को साफ़ रखने के लिए एक महत्वपूर्ण फीचर है। यह एक निर्देश है जिसका उपयोग अन्य फ़ाइलों में परिभाषित वेरिएबल्स, मिक्सिन्स और फंक्शन्स को 'expose' करने के लिए किया जाता है। इसे अकेले उपयोग करने के बजाय, यह एक एंट्री प्वाइंट की तरह काम करता है जो बताता है, 'इस मॉड्यूल को यहां से इस्तेमाल करें।'।

1@forward "variables";

• इस कोड का मतलब है 'variables.scss की सामग्री को अन्य फाइलों के लिए उपलब्ध कराना।'।

@use और @forward में अंतर

@use और @forward दोनों मॉड्यूल को मैनेज करने के सिंटैक्स हैं, लेकिन उनके उद्देश्य स्पष्ट रूप से अलग हैं। @use फाइल के अंदर आइटम्स को उपयोग करने के लिए है, और @forward अन्य फाइलों के लिए आइटम्स उपलब्ध कराने के लिए।

1// @use: import the module for use in this file
2@use "variables";
3
4// @forward: re-export the module for other files to consume
5@forward "variables";

• @use वर्तमान फाइल के कार्यान्वयन के लिए आवश्यक निर्भरता दिखाता है, जबकि @forward फाइल को public API entry point बनाता है। इस अंतर को समझना आपको तय करने में मदद करेगा कि @forward कहां उपयोग करें।

@forward क्यों ज़रूरी है?

जैसे-जैसे आप अधिक Sass फाइलें जोड़ते हैं, आपको कई @use स्टेटमेंट्स लिखने पड़ सकते हैं। @forward का उपयोग करके आप सभी चीजों को एक ही एंट्री फाइल में केंद्रीकृत कर सकते हैं।

1styles/
2├─ foundation/
3│  ├─ _variables.scss
4│  ├─ _mixins.scss
5│  └─ _index.scss
6└─ main.scss

• इस संरचना में, _index.scss 'public API' के रूप में काम करता है।

@forward का मूल उपयोग

आइए @forward के मूल उपयोग को देखें।

1// _variables.scss
2// Color definitions used across the project
3
4$primary-color: #006ab1;
5$secondary-color: #e0f0ff;
6
7// Internal use only (will be hidden via @forward hide)
8$debug-color: magenta;

• इस वेरिएबल को सीधे @use करने की जगह, आप उन्हें @forward के साथ ग्रुप करते हैं।

1// _index.scss
2@forward "variables";

• इस समय, _index.scss में कुछ भी नहीं होता; यह सिर्फ एक रिले फाइल होती है।

@forward किए गए मॉड्यूल्स का उपयोग करना

सीधे-सीधे individual फाइल्स को @use करने की बजाए, आप उपभोक्ता पक्ष पर उस index फाइल को @use करते हैं जिसमें @forwards को ग्रुप किया गया है। इससे आप इसे एक स्थिर इंटरफेस की तरह उपयोग कर सकते हैं बिना आंतरिक संरचना को जाने।

1// main.scss
2// Import the public API of the foundation layer
3@use "foundation";
4
5.button {
6  background-color: foundation.$primary-color;
7}

• इस डिज़ाइन के साथ, अगर variables या mixins के परिभाषा स्थान बदल भी जाएँ, तो आप आंतरिक संरचना को बदले बिना उपभोक्ता पक्ष की कोई कोडिंग बदलने की ज़रूरत नहीं होती।

@forward के साथ कई मॉड्यूल्स को जोड़ना

वास्तविक विकास में, सामान्यतः वेरिएबल्स, मिक्सिन्स और फंक्शन्स को उनकी भूमिकाओं के अनुसार विभाजित किया जाता है। @forward को कई बार लिखा जा सकता है, जिससे आप अलग-अलग मॉड्यूल्स को एक ही सार्वजनिक API में जोड़ सकते हैं।

नीचे, हम मिक्सिन्स और फंक्शन्स के उदाहरण देते हैं और ऐसे डिज़ाइन को दिखाते हैं जो इन्हें एक ही इंटरफ़ेस के रूप में बाहरी दुनिया को प्रस्तुत करता है।

 1// _mixins.scss
 2// Reusable mixins for layout and components
 3
 4// Reset default button styles
 5@mixin button-reset {
 6  appearance: none;
 7  background: none;
 8  border: none;
 9  padding: 0;
10  margin: 0;
11  font: inherit;
12  color: inherit;
13}
14
15// Clearfix utility
16@mixin clearfix {
17  &::after {
18    content: "";
19    display: table;
20    clear: both;
21  }
22}
23
24// Internal mixin (not intended to be part of the public API)
25@mixin debug-outline {
26  outline: 2px dashed red;
27}

 1// _functions.scss
 2// Utility functions for consistent styling
 3
 4@use "sass:math";
 5
 6// Convert px to rem based on a 16px root size
 7@function rem($px) {
 8  @return math.div($px, 16) * 1rem;
 9}
10
11// Clamp a value between a minimum and maximum
12@function clamp-value($value, $min, $max) {
13  @return math.max($min, math.min($value, $max));
14}

1// _index.scss
2// Re-export variables, mixins, and functions as a single public API
3@forward "variables";
4@forward "mixins";
5@forward "functions";

• केवल इस index फाइल को बाहर दिखाकर, आप आंतरिक संरचना छुपा सकते हैं और यूज़र-फ्रेंडली इंटरफेस उपभोक्ताओं के लिए दे सकते हैं।

नामकरण टकराव को रोकना (as)

अगर एक ही variable या mixin नाम कई modules में हो, तो आप @forward के साथ as का उपयोग कर सकते हैं, जिससे नामों को सार्वजनिक करते समय prefix जोड़कर टकराव से बच सकते हैं।

1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;

इस कोड के साथ, variables में $primary-color निम्नलिखित नाम के साथ प्रकट होगा:।

1// foundation.$var-primary-color

• यह तरीका डिज़ाइन नियमों को स्पष्ट रूप से परिभाषित करने और सुरक्षित रूप से स्केल करने का तरीका है, और यह विशेष रूप से बड़े प्रोजेक्ट्स या साझा लाइब्रेरीज में अनिवार्य तकनीक है।

अनावश्यक सदस्यों को छुपाना (hide)

Modules में ऐसे variables या mixins हो सकते हैं जो केवल आंतरिक प्रयोग के लिए होते हैं। hide का उपयोग करके, आप उन्हें दोबारा प्रदर्शित करते समय बाहर रखने से रोक सकते हैं और उन्हें बहारी उपयोग से सुरक्षित रख सकते हैं।

1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;

इस कॉन्फ़िगरेशन के साथ, $debug-color केवल module के अंदर सही है, जिससे उपभोक्ता द्वारा अनजाने में उपयोग से बचाव होता है।

किन सदस्यों को दिखाना है यह बताना (show)

अगर आप केवल कुछ mixins या functions को दिखाना चाहते हैं, तो show का इस्तेमाल करें। जो कुछ आप एक्सपोज़ करते हैं उसे सीमित करके, आप मॉड्यूल के उद्देश्य और उसके डिज़ाइन इरादे को स्पष्ट कर सकते हैं।

1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;

• इस तरह show का उपयोग कर के, एक नज़र में पता चल जाता है कि कौन-सी APIs आधिकारिक तौर पर उपलब्ध हैं।

@forward को अकेले उपयोग नहीं किया जा सकता

महत्वपूर्ण बात यह है कि @forward किए गए variables उसी फाइल में उपयोग नहीं किए जा सकते।

1@forward "variables";
2
3.test {
4  color: $primary-color; // Error
5}

• @forward केवल 'दोबारा प्रदर्शित' करने के लिए है, और 'उपयोग' करना @use का रोल है।

सही रोल विभाजन का उदाहरण

Sass में मॉड्यूल डिज़ाइन करते समय, पब्लिक-फेसिंग लेयर (API) और इम्प्लिमेंटेशन लेयर को स्पष्ट रूप से अलग करना आदर्श है। @forward पब्लिक API को परिभाषित करता है, और @use इसे इम्प्लिमेंटेशन साइड से इस्तेमाल करता है।

1// _index.scss (public API)
2@forward "variables";
3@forward "mixins";

1// _component.scss
2// Consume the public API of the foundation layer
3@use "foundation";
4
5.card {
6  color: foundation.$primary-color;
7}

• इस संरचना के साथ, यह स्पष्ट हो जाता है कि कौन-से हिस्से पब्लिक इंटरफेस हैं और कौन-से हिस्से आंतरिक कार्यान्वयन हैं, जिससे डिज़ाइन में पारदर्शिता आती है।

@import से मुख्य अंतर

@import सभी इम्पोर्टेड डेफिनिशन को ग्लोबल स्कोप में फैला देता है। दूसरी ओर, @use और @forward आइटम्स को स्पष्ट रूप से प्रकट करते हैं और उन्हें नेमस्पेस के माध्यम से एक्सेस करते हैं।

 1// @import (deprecated)
 2// Everything is injected into the global scope
 3$color: red;
 4
 5.button-import {
 6  color: $color;
 7}
 8
 9// @use + @forward (recommended)
10// Access values explicitly through a namespace
11@use "foundation";
12
13.button-use {
14  color: foundation.$primary-color;
15}

• इस अंतर के कारण, आप अनजाने ओवरराइट्स और डिपेंडेंसी कन्फ्यूजन को रोककर अनुरक्षण और सुरक्षा काफी बेहतर कर सकते हैं।

सारांश

@forward एक महत्वपूर्ण फ़ीचर है जो अनुरक्षित डिज़ाइन को सपोर्ट करता है। 'किसे दिखाना है और किसे आंतरिक इम्प्लिमेंटेशन के रूप में छिपाना है' का ध्यान रखते हुए, आपकी स्टाइल संरचना सुरक्षित और पढ़ने में आसान बनती है। @use और @forward का सही इस्तेमाल करके, आप निर्भरता स्पष्ट कर सकते हैं और बदलावों के प्रति मजबूत डिज़ाइन प्राप्त कर सकते हैं।

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

YouTube Video