SASS में पुनरावृत्ति
यह लेख बताता है कि SASS में पुनरावृत्ति कैसे संभालें।
हम असली कोड उदाहरणों का उपयोग करके SASS में पुनरावृत्ति कैसे करें, यह चरण-दर-चरण समझाएंगे।
YouTube Video
SASS में पुनरावृत्ति
SASS में पुनरावृत्ति कोड की पुनरावृत्ति को रोकती है और आपको लचीले और पुन: प्रयोज्य स्टाइल बनाने की अनुमति देती है।
SASS में पुनरावृत्ति का उपयोग करने के कारण
पुनरावृत्ति का उपयोग करने के कई फायदे हैं, जैसे कि:।
- कोड की पुन: उपयोगिता बढ़ती है, जिससे मिलते-जुलते पैटर्न वाली स्टाइल उत्पन्न करना आसान हो जाता है।
- रखरखाव बेहतर होता है, जिससे सभी स्टाइल को एक साथ बदलना आसान हो जाता है।
- यह त्रुटियों को भी कम करता है।
उदाहरण के लिए, आप एक साथ अलग-अलग रंगों के बटन या एक ही बार में कई साइज के कंपोनेंट्स के लिए स्टाइल जेनरेट कर सकते हैं।
SASS में पुनरावृत्ति के लिए प्रयुक्त सिंटैक्स
SASS में पुनरावृत्ति के लिए मुख्य सिंटैक्स निम्नलिखित हैं:।
@forका उपयोग करके, आप निर्धारित संख्याओं के दायरे में पुनरावृत्ति कर सकते हैं।@eachका उपयोग कर आप लिस्ट या मैप्स पर लूप चला सकते हैं।@whileका उपयोग करके, आप तब तक लूप चला सकते हैं जब तक कोई शर्त पूरी न हो जाए।
@for के साथ पुनरावृत्ति
@for निर्दिष्ट संख्या सीमा के आधार पर पुनरावृत्त प्रक्रिया करता है।
सिंटैक्स (वाक्य रचना)
1/*
2@for $i from <start> to <end> {
3 ...
4}
5
6@for $i from <start> through <end> {
7 ...
8}
9*/<start>और<end>के लिए प्रारंभ और समाप्ति मान निर्दिष्ट करें।toअंतिम मान को छोड़ देता है, जबकिthroughउसे शामिल करता है।
उदाहरण
निम्नलिखित कोड स्वचालित रूप से 1px की बढ़ोतरी के साथ सीमा चौड़ाई वाली कक्षाएं जेनरेट करता है।
1@for $i from 1 through 5 {
2 .border-#{$i} {
3 border-width: #{$i}px;
4 }
5}- यह कोड 1px की बढ़ोतरी के साथ बार्डर मोटाई के लिए कक्षाएं स्वचालित रूप से बनाता है। यहाँ
@forडायरेक्टिव का उपयोग 1 से 5 तक लूप चलाने के लिए किया गया है।
जनरेटेड CSS
1.border-1 {
2 border-width: 1px;
3}
4.border-2 {
5 border-width: 2px;
6}
7.border-3 {
8 border-width: 3px;
9}
10.border-4 {
11 border-width: 4px;
12}
13.border-5 {
14 border-width: 5px;
15}.border-1से.border-5तक की कक्षाएं क्रम से बनेंगी और प्रत्येक की मोटाई 1px बढ़ती जाएगी।
@each के साथ पुनरावृत्ति
@each सूचियों या मानचित्रों का उपयोग करके लूप चलाता है। यह उपयोगी है जब आप पैटर्न वाली कक्षाएं कुशलता से उत्पन्न करना चाहते हैं।
सिंटैक्स (वाक्य रचना)
1/*
2@each $item in <list> {
3 ...
4}
5*/उदाहरण 1: सूची का उपयोग
निम्नलिखित कोड कई टेक्स्ट रंग की कक्षाएं बनाता है।
1@each $color in ("red", "blue", "green") {
2 .text-#{$color} {
3 color: #{$color};
4 }
5}- यह कोड सूची के प्रत्येक रंग के लिए टेक्स्ट रंग कक्षाएं स्वचालित रूप से जेनरेट करता है।
@eachडायरेक्टिव का उपयोग सूची के हर मान को क्रमशः प्रोसेस करने के लिए किया जाता है।
जनरेटेड CSS
1.text-red {
2 color: red;
3}
4.text-blue {
5 color: blue;
6}
7.text-green {
8 color: green;
9}- जब SASS फाइल को CSS में कंपाइल किया जाता है, सूची के प्रत्येक रंग के लिए
.text-red,.text-blueऔर.text-greenजैसी कक्षाएं बनती हैं।
उदाहरण 2: मैप का उपयोग
मैप का उपयोग आपको कुंजी और मान की जोड़ियों को संभालने की सुविधा देता है। निम्नलिखित उदाहरण में बटन की पृष्ठभूमि के रंग एक मैप के द्वारा तय किए गए हैं।
1$colors: (
2 primary: #3498db,
3 success: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $hex in $colors {
8 .bg-#{$name} {
9 background-color: #{$hex};
10 }
11}जनरेटेड CSS
1.bg-primary {
2 background-color: #3498db;
3}
4.bg-success {
5 background-color: #2ecc71;
6}
7.bg-danger {
8 background-color: #e74c3c;
9}- SASS फाइल को CSS में बदले जाने पर
.bg-primary,.bg-successऔर.bg-dangerजैसी कक्षाएं प्रत्येक कुंजी के लिए बनती हैं।
@while के साथ पुनरावृत्ति
@while तब तक लूप जारी रखता है जब तक शर्त सही रहती है।
सिंटैक्स (वाक्य रचना)
1/*
2@while <condition> {
3 ...
4}
5*/उदाहरण
उदाहरण के लिए, यदि आप फ़ॉन्ट साइज को चरण-दर-चरण बढ़ाना चाहते हैं, तो इसे इस प्रकार लिख सकते हैं:।
1$i: 1;
2
3@while $i <= 5 {
4 .font-#{$i} {
5 font-size: #{$i}rem;
6 }
7 $i: $i + 1;
8}- स्टेप्स में फॉन्ट साइज बढ़ाते समय पुनरावृत्त प्रक्रिया के लिए आप
@whileडायरेक्टिव का उपयोग कर सकते हैं। $i वेरिएबल का उपयोग करके 1 से 5 तक के मानों के लिए कक्षाएं अपने आप बन जाती हैं।
जनरेटेड CSS
1.font-1 {
2 font-size: 1rem;
3}
4.font-2 {
5 font-size: 2rem;
6}
7.font-3 {
8 font-size: 3rem;
9}
10.font-4 {
11 font-size: 4rem;
12}
13.font-5 {
14 font-size: 5rem;
15}- जब SASS फाइल CSS में बदली जाती है, तो 1rem से 5rem तक फॉन्ट साइज के साथ कक्षाएं अपने आप बन जाती हैं।
उन्नत उदाहरण: पुनरावृत्ति और नेस्टिंग का संयोजन
SASS के नेस्टिंग फीचर के साथ पुनरावृत्ति को मिलाकर और भी उन्नत स्टाइल जेनरेट करना संभव है।
उदाहरण
नीचे एक उदाहरण है जिसमें बटन के पृष्ठभूमि और होवर रंग दोनों को एक साथ परिभाषित किया गया है।
1@use "sass:color";
2
3$colors: (
4 primary: #3498db,
5 success: #2ecc71,
6 danger: #e74c3c
7);
8
9@each $name, $hex in $colors {
10 .btn-#{$name} {
11 background-color: $hex;
12 color: white;
13
14 &:hover {
15 background-color: color.scale($hex, $lightness: -10%);
16 }
17 }
18}- पुनरावृत्ति और SASS नेस्टिंग को मिलाकर, आप सभी बटन की पृष्ठभूमि और होवर रंगों को एक साथ उत्पन्न कर सकते हैं। मानचित्र में प्रत्येक रंग के लिए, एक
.btn-क्लास बनाई जाती है और नेस्टिंग का उपयोग करके:hoverशैली परिभाषित की जाती है।
जनरेटेड CSS
1.btn-primary {
2 background-color: #3498db;
3 color: white;
4}
5.btn-primary:hover {
6 background-color: #2980b9;
7}
8.btn-success {
9 background-color: #2ecc71;
10 color: white;
11}
12.btn-success:hover {
13 background-color: #27ae60;
14}
15.btn-danger {
16 background-color: #e74c3c;
17 color: white;
18}
19.btn-danger:hover {
20 background-color: #c0392b;
21}- जब आप SASS फ़ाइल को CSS में कनवर्ट करते हैं, तो प्रत्येक बटन के लिए बैकग्राउंड रंग और होवर रंग अपने आप जनरेट हो जाते हैं, और :hover स्टाइल्स को नेस्टिंग द्वारा सामूहिक रूप से परिभाषित किया जाता है।
पुनरावृत्ति का उपयोग करते समय ध्यान देने योग्य बातें
पुनरावृत्ति का उपयोग करते समय अधिक प्रभावी और पठनीय कोड के लिए निम्नलिखित बातों का ध्यान रखें।
-
बहुत गहरी नेस्टिंग से बचें अत्यधिक नेस्टिंग पठनीयता घटाती है, इसलिए इसे जितना जरूरी हो उतना ही सीमित रखें।
-
प्रदर्शन पर पड़ने वाले प्रभावों पर ध्यान दें अगर पुनरावृत्ति से बहुत ज्यादा कक्षाएं बन रही हैं तो आपकी CSS बेवजह बड़ी हो सकती है।
-
उपयुक्त वेरिएबल नामों का उपयोग करें
$iया$itemजैसे वेरिएबल के लिए अर्थपूर्ण नाम दें, ताकि कोड समझना आसान हो।
सारांश
SASS में पुनरावृत्ति का उपयोग कुशल और रखरखाव योग्य स्टाइल डिज़ाइन को सक्षम बनाता है। खास तौर पर, @for, @each और @while में से चयन करना आपको डायनामिक और लचीली CSS बनाने की सुविधा देता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।