SASS में सूचियाँ
यह लेख SASS में सूचियों को समझाता है।
हम SASS सूचियों की मूल बातें और उन्नत उपयोग चर्चा करेंगे और व्यावहारिक उदाहरण देंगे।
YouTube Video
SASS में सूचियाँ
SASS, CSS के विस्तार के रूप में उपयोगी प्रोग्रामिंग-जैसी सुविधाएँ प्रदान करता है। इनमें, स्टाइल्स को डायनामिक रूप से परिभाषित करते समय सूचियाँ बहुत उपयोगी सुविधा हैं।
SASS सूचि क्या है?
SASS सूचि, कॉमा (',') या स्पेस द्वारा विभाजित मानों का संग्रह होती है। इनका उपयोग तब किया जाता है जब कई मान CSS प्रॉपर्टीज़ को देने हों या पुनरावृत्ति करनी हो।
1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;सूचियों की मुख्य विशेषताओं में निम्नलिखित बिंदु शामिल हैं:।
- सूचि में किसी भी प्रकार के मान हो सकते हैं, जैसे संख्या, स्ट्रिंग या रंग।
- आप उपयोग के अनुसार कॉमा सेपरेटेड या स्पेस सेपरेटेड सूचि चुन सकते हैं।
सूचियों का उपयोग कर स्टाइल परिभाषा का मूल उदाहरण
नीचे सूचियों का उपयोग कर डायनामिक रूप से साधारण बॉर्डर स्टाइल बनाने का उदाहरण है।
1@use "sass:list";
2
3$border-widths: 1px, 2px, 3px;
4
5.border-example {
6 @for $i from 1 through list.length($border-widths) {
7 &-#{list.nth($border-widths, $i)} {
8 border-width: list.nth($border-widths, $i);
9 }
10 }
11}कंपाइलेशन आउटपुट
1.border-example-1px {
2 border-width: 1px;
3}
4
5.border-example-2px {
6 border-width: 2px;
7}
8
9.border-example-3px {
10 border-width: 3px;
11}sass:listमॉड्यूल केnth()फ़ंक्शन के साथ, आप एक सूची से किसी विशिष्ट मान को प्राप्त कर सकते हैं।
सूचियों का प्रबंधन
sass:list मॉड्यूल सूचियों में हेरफेर करने के लिए फ़ंक्शन प्रदान करता है, जिससे तत्वों को प्राप्त करना और जोड़ना आसान हो जाता है।
किसी तत्व को प्राप्त करें: nth()
nth() एक फंक्शन है जो सूचि से किसी तत्व को प्राप्त करता है।
1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red- इस कोड में,
nth()फंक्शन का उपयोग दिए गए इंडेक्स पर मान पाने के लिए किया गया है।
इंडेक्स जांचें: index()
index() एक फ़ंक्शन है जो सूची में किसी तत्व की स्थिति लौटाता है।
1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3- इस कोड में,
index()का उपयोग यह पता लगाने के लिए किया गया है किblueतत्व सूची में तीसरा आइटम है।
सूचि की लंबाई प्राप्त करें: length()
length() एक फंक्शन है जो सूचि की लंबाई लौटाता है।
1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3- इस कोड में,
length()फंक्शन का उपयोग सूचि में मौजूद मानों की संख्या प्राप्त करने के लिए किया गया है।
तत्व जोड़ें: append()
append() एक फंक्शन है जिसका उपयोग सूचि में तत्व जोड़ने के लिए किया जाता है।
1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle- इस कोड में,
append()फंक्शन का उपयोग सूचि में मान जोड़ने के लिए किया गया है।
तत्व बदलें: set-nth()
set-nth() एक फ़ंक्शन है जो निर्दिष्ट स्थिति पर तत्व को किसी अन्य मान से बदल देता है।
1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue- इस कोड में,
set-nth()का उपयोग दूसरे तत्व कोyellowसे बदलने के लिए किया गया है।
सूचियों को जोड़ें: join()
join() एक फ़ंक्शन है जो दो सूचियों को जोड़ता है।
1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d- इस कोड में,
join()का उपयोग दो सूचियों को एक में जोड़ने के लिए किया गया है।
सूचियों को जोड़ें: zip()
zip() एक फ़ंक्शन है जो कई सूचियों को तत्व-दर-तत्व समूहित करता है।
1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)- इस कोड में,
zip()का उपयोग नामों और उम्र को जोड़ों के रूप में जोड़ने के लिए किया गया है।
नेस्टेड सूचियाँ
सूचियाँ नेस्ट भी की जा सकती हैं, जिससे वे दो-आयामी ऐरे की तरह उपयोग हो सकती हैं।
1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red- ऐसी जटिल डेटा संरचनाओं का प्रबंधन करके, उन्नत स्टाइल जेनरेशन संभव हो जाता है।
व्यावहारिक उदाहरण: ग्रेडिएंट बनाना
यहाँ सूचियों का उपयोग कर प्रभावी रूप से ग्रेडिएंट बनाने का एक उदाहरण है।
1@use "sass:list";
2@use "sass:math";
3
4$colors: red, orange, yellow, green, blue;
5
6@function gradient($colors) {
7 $gradient: ();
8 $len: list.length($colors);
9
10 @for $i from 1 through $len {
11 // build "color percent%" string with interpolation
12 $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13 $gradient: list.append($gradient, $item);
14 }
15
16 @return $gradient;
17}
18
19.background {
20 background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}कंपाइलेशन आउटपुट
1.background {
2 background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}-
यह कोड SCSS में सूचियों का उपयोग कर स्वतः ग्रेडिएंट बनाने का उदाहरण है।
- ग्रेडिएंट में प्रयोग होने वाले रंग
$colorsसूचि में परिभाषित किए गए हैं। gradient()फंक्शन में, रंगों की संख्या के अनुसार हर रंग को एक स्थिति बराबर-बराबर बांटी जाती है, जिससे ग्रेडिएंट के लिए सूचि बनती है।.backgroundक्लास में,linear-gradientका उपयोग उत्पन्न रंग सूची को संयोजित करने और क्षैतिज ग्रेडिएंट लगाने के लिए किया गया है।
- ग्रेडिएंट में प्रयोग होने वाले रंग
-
चूंकि स्थिति रंग सूचि की लंबाई के अनुसार स्वतः गणना की जाती है, आप रंग जोड़ने या बदलने पर भी आसानी से एकसमान ग्रेडिएंट बना सकते हैं।
सावधानियाँ और सर्वोत्तम प्रथाएँ
सूचियों का उपयोग करते समय निम्न बिंदुओं पर विचार किया जा सकता है:।
-
सूचि विभाजक प्रकार कॉमा और स्पेस सेपरेटेड सूचियों का व्यवहार अलग-अलग होता है, इसलिए स्थिति के अनुसार सही विकल्प चुनना चाहिए।
-
सूचि का आकार सूचियों का डायनामिक रूप से प्रबंधन करते समय,
length()फंक्शन से आकार जांचना सुरक्षित रहता है। -
नेस्टेड सूचियों का प्रबंधन नेस्टेड सूचियों का प्रबंधन करते समय, सावधानीपूर्वक इंडेक्स संचालन से त्रुटियों से बचा जा सकता है।
निष्कर्ष
SASS सूचियाँ, स्टाइल्स को डायनामिक रूप से परिभाषित करने और जटिल डिज़ाइनों को प्रभावी ढंग से प्रबंधित करने के लिए एक शक्तिशाली उपकरण हैं।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।