SASS में `!default` फ्लैग
यह लेख SASS में !default फ़्लैग को समझाता है।
हम !default फ़्लैग को विस्तार से समझाएंगे और व्यावहारिक उदाहरणों के साथ इसका उपयोग कैसे करें यह दिखाएंगे।
YouTube Video
SASS में !default फ्लैग
SASS में !default फ्लैग स्टाइलशीट्स की मॉड्यूलैरिटी और पुन: प्रयोज्यता (reusability) को सुधारने के लिए एक महत्वपूर्ण उपकरण है। इस फ्लैग का उपयोग करके, आप वेरिएबल्स के लिए डिफॉल्ट मान सेट कर सकते हैं, साथ ही अन्य स्थानों पर परिभाषित मानों को प्राथमिकता दे सकते हैं। यहाँ, हम !default फ्लैग को विस्तार से समझाएंगे और इसके उपयोग को व्यावहारिक उदाहरणों के साथ दिखाएंगे।
!default फ्लैग SASS-विशिष्ट सुविधा है जिसका उपयोग वेरिएबल्स के लिए डिफॉल्ट मान सेट करने के लिए किया जाता है। इस फ्लैग को जोड़ने से निम्नलिखित व्यवहार प्राप्त होता है:।
-
डिफॉल्ट मान निर्दिष्ट करना मान केवल तब सेट किया जाता है जब वेरिएबल कहीं और परिभाषित न हो।
-
प्राथमिकता नियंत्रित करना अगर वेरिएबल पहले से परिभाषित है, तो उसका मान ओवरराइट नहीं किया जाएगा।
यह सुविधा विशेष रूप से मॉड्यूल्स और लाइब्रेरियों का निर्माण करते समय उपयोगी है। यूज़र्स कस्टम मान सेट कर सकते हैं, परन्तु यदि कुछ निर्दिष्ट नहीं किया गया है तो डिफॉल्ट मान उपयोग किए जाएँगे।
मूल उदाहरण
निम्नलिखित कोड !default फ्लैग के मूल उपयोग को दर्शाता है।
1// _variables.scss
2$primary-color: blue !default;!defaultफ्लैग का उपयोग करके डिफ़ॉल्ट वेरिएबल$primary-colorको परिभाषित करना।
1// main.scss
2@use 'variables' with (
3 $primary-color: red
4);
5
6body {
7 background-color: variables.$primary-color;
8}@useका उपयोग करके वेरिएबल्स को इम्पोर्ट करना औरwithके साथ$primary-colorको ओवरराइड करना।
आउटपुट CSS
1body {
2 background-color: red;
3}- इस उदाहरण में, क्योंकि
$primary-colorकोmain.scssमेंredसेट किया गया है,_variables.scssमें परिभाषितblueउपयोग नहीं किया जाएगा।
जब वेरिएबल अपरिभाषित है
अगर वेरिएबल main.scss में परिभाषित नहीं है, तो डिफॉल्ट मान उपयोग किया जाएगा।
1// main.scss
2@use 'variables';
3
4body {
5 background-color: variables.$primary-color;
6}- चूँकि वेरिएबल को ओवरराइड किए बिना इम्पोर्ट किया गया है, इसलिए
_variables.scssमें परिभाषित$primary-colorकी डिफ़ॉल्ट वैल्यूblueलागू होती है।
आउटपुट CSS
1body {
2 background-color: blue;
3}नेस्टेड मॉड्यूल्स में उपयोग
मॉड्यूल्स के भीतर !default का उपयोग लचीला कस्टमाइज़ेशन संभव बनाता है।
1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;!defaultफ्लैग के साथ$primary-colorऔर$button-colorको परिभाषित करना।
1// _buttons.scss
2@use 'variables';
3
4.button {
5 color: variables.$button-color;
6}variablesमॉड्यूल को इम्पोर्ट करना और$button-colorवेरिएबल का उपयोग करके.buttonका रंग निर्धारित करना।
1// main.scss
2@use 'variables' with (
3 $button-color: orange
4);
5
6@use 'buttons';@useकोwithके साथ प्रयोग कर$button-colorकोorangeसे ओवरराइड करना औरbuttonsमॉड्यूल का उपयोग करना।
आउटपुट CSS
1.button {
2 color: orange;
3}- इस तरह, मॉड्यूल्स डिफॉल्ट मान प्रदान करते हैं और साथ ही यूज़र द्वारा चुने गए सेटिंग्स का सम्मान करते हैं।
ध्यान देने योग्य बिंदु
!default फ्लैग का प्रयोग करते समय निम्नलिखित बिंदुओं पर ध्यान देना चाहिए:।
-
उपयुक्त डिफॉल्ट मान चुनना डिफॉल्ट मान आम उपयोग मामलों को ध्यान में रखकर चुने जाने चाहिए।
-
इरादतन डिज़ाइन लगातार वेरिएबल नामों का उपयोग करें और अन्य मॉड्यूल्स के साथ संघर्ष से बचें।
-
क्रम सत्यापन
!defaultफ्लैग के इच्छित रूप से कार्य करने के लिए, वेरिएबल ओवरराइड के क्रम को सही ढंग से प्रबंधित करना चाहिए।
व्यावहारिक परिदृश्य
थीम बदलना
उदाहरण के लिए, जब आप कोई ऐसी लाइब्रेरी बना रहे हैं जो थीम्स को सपोर्ट करती है, तब आप कस्टमाइज़ेबल डिफॉल्ट मान प्रदान करने के लिए !default का उपयोग कर सकते हैं।
1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6 background-color: $background-color;
7 color: $text-color;
8}- थीम के लिए
$background-colorऔर$text-colorको!defaultफ्लैग के साथ परिभाषित करना और इन्हेंbodyपर लागू करना।
1// main.scss
2@use 'theme' with (
3 $background-color: #f0f0f0
4);@useऔरwithके साथ$background-colorको ओवरराइड करके थीम को कस्टमाइज़ करना।
आउटपुट CSS
1body {
2 background-color: #f0f0f0;
3 color: black;
4}दोबारा उपयोग होने वाले कंपोनेंट्स
एक पुन: उपयोगी बटन कंपोनेंट में, आप डिफॉल्ट स्टाइल्स प्रदान कर सकते हैं और यूज़र्स को रंग ओवरराइड करने की अनुमति दे सकते हैं।
1// _buttons.scss
2$button-bg: #007bff !default;
3$button-color: #ffffff !default;
4
5.button {
6 background-color: $button-bg;
7 color: $button-color;
8 padding: 0.5em 1em;
9 border-radius: 4px;
10}!defaultके साथ बटनों के लिए डिफ़ॉल्ट बैकग्राउंड और टेक्स्ट रंग को परिभाषित करना और स्टाइल्स लागू करना।
1// main.scss
2@use 'buttons' with (
3 $button-bg: #28a745
4);@useऔरwithके साथ$button-bgको ओवरराइड कर बटन के रंग को कस्टमाइज़ करना।
आउटपुट CSS
1.button {
2 background-color: #28a745;
3 color: #ffffff;
4 padding: 0.5em 1em;
5 border-radius: 4px;
6}!default फ्लैग का सारांश
SASS में !default फ्लैग मॉड्यूल्स और लाइब्रेरी बनाते समय एक शक्तिशाली उपकरण है। यह पुनः प्रयोज्यता को बढ़ाता है और साथ ही लचीला कस्टमाइज़ेशन भी संभव बनाता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।