SASS में कंडीशनल्स
यह लेख SASS में कंडीशनल्स की व्याख्या करता है।
हम व्यावहारिक उदाहरणों के साथ @if, @else if और @else निर्देशों का उपयोग करके कंडीशनल्स की बुनियाद से लेकर उन्नत उपयोग तक सब कुछ स्पष्ट रूप से समझाते हैं।
YouTube Video
SASS में कंडीशनल्स
SASS एक स्टाइलशीट भाषा है जो CSS का विस्तार करती है, और कंडीशनल्स का उपयोग करके आप स्टाइल्स को लचीले ढंग से नियंत्रित कर सकते हैं। SASS में, आप @if, @else if और @else का उपयोग करके कंपाइल समय पर स्टाइल्स के आउटपुट को स्विच कर सकते हैं।
मूलभूत कंडीशनल सिंटैक्स
SASS में मूलभूत कंडीशनल्स निम्नलिखित सिंटैक्स से लिखे जाते हैं।
1@if condition {
2 // Code executed when the condition is true
3} @else if condition {
4 // Code executed when another condition is true
5} @else {
6 // Code executed when all conditions are false
7}@ifपहली शर्त का मूल्यांकन करता है, और यदि वह गलत हो, तो क्रम से@else ifया@elseब्लॉक्स का मूल्यांकन किया जाता है।
सरल कंडीशनल उदाहरण
निम्न उदाहरण में, पृष्ठभूमि रंग $theme वेरिएबल के आधार पर बदलता है।
1$theme: "dark";
2
3body {
4 @if $theme == "dark" {
5 background-color: #333;
6 color: #fff;
7 } @else if $theme == "light" {
8 background-color: #fff;
9 color: #000;
10 } @else {
11 background-color: #f0f0f0;
12 color: #333;
13 }
14}कम्पाइल्ड CSS
1body {
2 background-color: #333;
3 color: #fff;
4}- जब
$theme"dark"हो, तब गहरी पृष्ठभूमि और सफेद टेक्स्ट रंग लागू होते हैं।
गणनाओं के साथ कंडीशनल्स का संयोजन
कंडीशनल्स न केवल स्ट्रिंग और रंग की तुलना संभालते हैं, बल्कि संख्यात्मक गणनाएँ भी संभालते हैं।
1$width: 1200px;
2
3.container {
4 @if $width > 1000px {
5 max-width: 1200px;
6 } @else {
7 max-width: 800px;
8 }
9}कम्पाइल्ड CSS
1.container {
2 max-width: 1200px;
3}- संख्यात्मक तुलना भी संभव है, और जब
$width1000px से अधिक हो जाए, तोmax-width: 1200pxआउटपुट होता है।
नेस्टेड कंडीशनल्स
कंडीशनल्स को नेस्ट करके, आप जटिल शर्तों को व्यक्त कर सकते हैं।
1$theme: "dark";
2$size: "large";
3
4button {
5 @if $theme == "dark" {
6 background-color: #000;
7 color: #fff;
8
9 @if $size == "large" {
10 padding: 20px;
11 } @else {
12 padding: 10px;
13 }
14 } @else {
15 background-color: #fff;
16 color: #000;
17
18 @if $size == "large" {
19 padding: 15px;
20 } @else {
21 padding: 8px;
22 }
23 }
24}कम्पाइल्ड CSS
1button {
2 background-color: #000;
3 color: #fff;
4 padding: 20px;
5}- कंडीशनल्स का नेस्टिंग थीम और आकार दोनों के आधार पर स्टाइलिंग सक्षम करता है।
कस्टम फ़ंक्शनों में कंडीशनल्स का उपयोग
कस्टम फ़ंक्शनों के भीतर कंडीशनल्स का उपयोग पुन: उपयोगिता को बेहतर बना सकता है।
1@function adjust-color($theme) {
2 @if $theme == "dark" {
3 @return #333;
4 } @else if $theme == "light" {
5 @return #fff;
6 } @else {
7 @return #ccc;
8 }
9}
10
11.card {
12 background-color: adjust-color("dark");
13}कम्पाइल्ड CSS
1.card {
2 background-color: #333;
3}- कंडीशनल्स को फ़ंक्शनों में संलग्न करके, आप पुन: उपयोगिता और अनुरक्षणीयता बढ़ा सकते हैं।
व्यावहारिक उदाहरण - डिज़ाइनों को स्विच करना
कुछ शर्तों के आधार पर समग्र डिज़ाइन को स्विच करने का एक उदाहरण देखें।
1$theme: "light";
2
3body {
4 font-family: Arial, sans-serif;
5
6 @if $theme == "dark" {
7 background-color: #121212;
8 color: #e0e0e0;
9 } @else if $theme == "light" {
10 background-color: #f9f9f9;
11 color: #333;
12 } @else {
13 background-color: #fff;
14 color: #000;
15 }
16}
17
18header {
19 @if $theme == "dark" {
20 border-bottom: 1px solid #333;
21 } @else {
22 border-bottom: 1px solid #ccc;
23 }
24}कम्पाइल्ड CSS
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f9f9f9;
4 color: #333;
5}
6
7header {
8 border-bottom: 1px solid #ccc;
9}- आप थीम वेरिएबल के अनुसार पूरे पेज की रंग योजना को गतिशील रूप से स्विच कर सकते हैं।
नोट्स और सर्वोत्तम प्रथाएँ
SASS में कंडीशनल्स का उपयोग करते समय, आप निम्नलिखित बिंदुओं पर विचार कर सकते हैं।
-
कंडीशनल्स को सरल रखें
जटिल नेस्टिंग पठनीयता को नुकसान पहुँचाती है, इसलिए फ़ंक्शनों और मिक्सिन्स का लाभ उठाना चीज़ों को सरल रखने में मदद करता है।
-
वेरिएबल्स और फ़ंक्शनों के साथ अमूर्तन करें
यदि आप एक जैसी शर्तें कई स्थानों पर उपयोग करते हैं, तो उन्हें वेरिएबल्स या फ़ंक्शनों में समेकित करना अनुरक्षणीयता में सुधार करता है।
-
भारी-भरकम लॉजिक से बचें
डिज़ाइन नियमों को यथासंभव एकीकृत करें और कंडीशनल्स के अति-उपयोग से बचें।
निष्कर्ष
SASS में कंडीशनल्स लचीली, गतिशील स्टाइल्स बनाने के लिए एक अत्यंत प्रभावी उपकरण हैं। यहाँ, हमने बुनियादी बातों से लेकर व्यावहारिक उदाहरणों तक सब कुछ चरण-दर-चरण समझाया। वास्तविक प्रोजेक्ट्स में कंडीशनल्स का उपयोग करते समय, चीज़ों को अनावश्यक रूप से जटिल किए बिना पुन: उपयोग योग्य कोड को ध्यान में रखकर डिज़ाइन करें।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।