SASS में `if` फ़ंक्शन
यह लेख SASS के if फ़ंक्शन को समझाता है।
हम if फ़ंक्शन की बुनियाद से लेकर उन्नत तकनीकों तक, चरण-दर-चरण, सब कुछ देखेंगे।
YouTube Video
SASS में if फ़ंक्शन
SASS द्वारा प्रदान किया गया if() फ़ंक्शन एक सरल शर्तीय (conditional) फ़ंक्शन है, जो बूलियन शर्त के आधार पर दो मानों में से एक लौटाता है। यह JavaScript के ternary ऑपरेटर के समान है।
सिंटैक्स (वाक्य रचना)
सिन्टैक्स इस प्रकार है:।
1// if(condition, trueValue, falseValue)conditionसत्य हो तोtrueValueलौटाता है; असत्य हो तोfalseValueलौटाता है।
मूल उपयोग
उदाहरण के लिए, आप थीम डार्क है या लाइट, इसके आधार पर बैकग्राउंड और टेक्स्ट के रंग बदलने के लिए if() फ़ंक्शन का उपयोग कर सकते हैं।
नमूना कोड (Sample Code)
1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7 background-color: $background-color;
8 color: $text-color;
9}- यदि
$themeवेरिएबल"dark"है, तो बैकग्राउंड काला और टेक्स्ट सफ़ेद हो जाता है; यदि यह"light"है, तो बैकग्राउंड सफ़ेद और टेक्स्ट काला हो जाता है।
उत्पन्न CSS
1body {
2 background-color: black;
3 color: white;
4}- क्योंकि
$themeवेरिएबल"dark"है, इसलिए बैकग्राउंड काला और टेक्स्ट सफ़ेद है।
@if स्टेटमेंट और if() फ़ंक्शन के बीच अंतर
Sass सशर्त ब्रांचिंग के लिए @if स्टेटमेंट और if() फ़ंक्शन प्रदान करता है, लेकिन उनका उपयोग अलग-अलग उद्देश्यों के लिए किया जाता है।
नमूना कोड (Sample Code)
1$theme: "dark";
2
3// `@if` statement: Compile-time branching (syntax level)
4$background-color: null;
5@if $theme == "dark" {
6 $background-color: black;
7} @else if $theme == "light" {
8 $background-color: white;
9} @else {
10 $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17 background-color: $background-color;
18 color: $text-color;
19}@ifस्टेटमेंट यह नियंत्रित करता है कि Sass के कंपाइल समय पर कौन-सा कोड आउटपुट होगा।- इसके विपरीत,
if()फ़ंक्शन एक मान लौटाता है और अभिव्यक्तियों के भीतर मानों को गतिशील रूप से बदलने के लिए प्रयोग होता है।
उत्पन्न CSS
1body {
2 background-color: black;
3 color: white;
4}- इस उदाहरण में, क्योंकि
$theme"dark" है, काली पृष्ठभूमि और सफेद टेक्स्ट रंग लागू होते हैं। - दो मुख्य अंतर यह हैं कि
@ifस्टेटमेंट संरचना को नियंत्रित करता है, औरif()फ़ंक्शन एक मान लौटाता है।
नेस्टेड if फ़ंक्शनों का उपयोग
जब आपको जटिल ब्रांचिंग की आवश्यकता हो, तो आप if फ़ंक्शनों को नेस्ट कर सकते हैं।
नमूना कोड (Sample Code)
1$theme: "custom";
2$custom-color: blue;
3
4$background-color: if(
5 $theme == "dark",
6 black,
7 if(
8 $theme == "light",
9 white,
10 $custom-color
11 )
12);
13
14body {
15 background-color: $background-color;
16}- यदि
$theme"dark"है, तो यह काला लौटाता है; यदि"light"है, तो सफ़ेद; अन्यथा, यह डिफ़ॉल्ट मान ($custom-color) लौटाता है।
उत्पन्न CSS
1body {
2 background-color: blue;
3}- क्योंकि
$themeवेरिएबलcustomहै, इसलिए बैकग्राउंड रंग नीला है।
व्यावहारिक उपयोग मामले
थीम स्विचिंग
नीचे एक उदाहरण है जो थीम के आधार पर बटन की शैली बदलता है।
1$theme: "dark";
2
3.button {
4 background-color: if($theme == "dark", #333, #fff);
5 color: if($theme == "dark", #fff, #333);
6 border: 1px solid if($theme == "dark", #444, #ccc);
7}- यह कोड SASS का एक शर्तीय उदाहरण है, जो
$themeवेरिएबल के मान के आधार पर बटन के बैकग्राउंड, टेक्स्ट और बॉर्डर के रंग बदलता है।if()फ़ंक्शन का उपयोग डार्क और लाइट थीम के लिए शैलियाँ गतिशील रूप से सेट करने में होता है।
उत्पन्न CSS
1.button {
2 background-color: #333;
3 color: #fff;
4 border: 1px solid #444;
5}- थीम स्विच करके, आप संपूर्ण डिज़ाइन को एकसमान रूप से बदल सकते हैं।
उन्नत उदाहरण: रंग कंट्रास्ट को गतिशील रूप से सेट करना
आइए एक उदाहरण देखें जो बैकग्राउंड रंग के आधार पर टेक्स्ट रंग स्वतः सेट करता है।
नमूना कोड (Sample Code)
1@use "sass:color";
2
3$background-color: #000;
4
5$text-color: if(
6 color.channel($background-color, "lightness", $space: hsl) > 50%,
7 black,
8 white
9);
10
11body {
12 background-color: $background-color;
13 color: $text-color;
14}color.channel()फ़ंक्शन पृष्ठभूमि रंग की lightness (lightness) प्राप्त करने के लिए उपयोग किया जाता है। यदि वह मान50%से बड़ा है, तो काला चुना जाता है; यदि वह छोटा है, तो टेक्स्ट रंग के रूप में सफेद चुना जाता है, जिससे पृष्ठभूमि के साथ कंट्रास्ट अपने आप अनुकूलित हो जाता है।
उत्पन्न CSS
1body {
2 background-color: #000;
3 color: white;
4}if()फ़ंक्शन का उपयोग करके, आप कंट्रास्ट समायोजन जैसी डिज़ाइन सुगम्यता को ध्यान में रखने वाली लचीली स्टाइल्स लागू कर सकते हैं।
@function के साथ संयोजन
@function के अंदर if फ़ंक्शन का उपयोग करने से और भी लचीला स्टाइल डिज़ाइन संभव होता है।
नमूना कोड (Sample Code)
1@function theme-color($theme, $type) {
2 @return if(
3 $theme == "dark",
4 if(
5 $type == "background",
6 black,
7 white
8 ),
9 if(
10 $type == "background",
11 white,
12 black
13 )
14 );
15}
16
17body {
18 background-color: theme-color("dark", "background");
19 color: theme-color("dark", "text");
20}- यह कोड
@functionके भीतरif()का उपयोग दिखाता है ताकि थीम और रंग के प्रकार के आधार पर उपयुक्त रंग लौटाए जा सकें। यह प्रत्येक थीम के लिए सुसंगत और पुन: प्रयोज्य स्टाइल डिज़ाइन सक्षम करता है।
उत्पन्न CSS
1body {
2 background-color: black;
3 color: white;
4}if()फ़ंक्शन का लाभ उठाने वाले हेल्पर फ़ंक्शंस बनाकर और उनका उपयोग करके, आप पूरे प्रोजेक्ट की रखरखाव-योग्यता में सुधार कर सकते हैं।
नोट्स
-
ifफ़ंक्शन का उपयोग डायनेमिक मानों के साथ नहीं किया जा सकता क्योंकि CSS स्वयं एक स्थैतिक भाषा है, इसलिएifफ़ंक्शन मानों का निर्धारण SASS के संकलन के समय करता है। रनटाइम शर्तीय लॉजिक के लिए, आपको JavaScript का उपयोग करना होगा। -
पठनीयता को प्राथमिकता दें क्योंकि नेस्टेड
ifफ़ंक्शन जटिल हो सकते हैं और पठनीयता को नुकसान पहुँचा सकते हैं, आप आवश्यकता अनुसार अपने कोड को व्यवस्थित करने के लिए SASS@mixinऔर@functionका उपयोग कर सकते हैं।
निष्कर्ष
SASS का if फ़ंक्शन एक शक्तिशाली उपकरण है जो शर्तों के आधार पर अलग-अलग मान लौटाता है। यह केवल सरल शर्तों के लिए ही नहीं, बल्कि थीम स्विचिंग और डायनेमिक स्टाइल सेटिंग्स जैसे कई परिदृश्यों में भी उपयोगी है। हालाँकि, जटिल शर्तों से निपटते समय, पठनीयता पर ध्यान दें और मेंटेनबिलिटी सुधारने के लिए @mixin तथा @function का उपयोग करें।
if फ़ंक्शन में महारत हासिल करके, आप अधिक कुशल और लचीला स्टाइल डिज़ाइन प्राप्त कर सकते हैं।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।