SASS में मैप्स
यह लेख SASS में मैप्स को समझाता है।
हम SASS मैप्स की बुनियादी से लेकर उन्नत उपयोग तक की व्याख्या करेंगे और व्यावहारिक उदाहरण प्रदान करेंगे।
YouTube Video
SASS में मैप्स
SASS में मैप क्या है?
SASS में एक मैप एक डेटा संरचना है जो कुंजी-मूल्य (key-value) जोड़ियों को संग्रहीत करता है, जैसे JavaScript में ऑब्जेक्ट्स या Python में डिक्शनरी। SASS में मैप्स का उपयोग करके आप जटिल शैलियों को संक्षिप्त रूप से प्रबंधित कर सकते हैं और रखरखाव में सुधार कर सकते हैं।
मैप्स की मूल सिंटैक्स
SASS में मैप्स को () (कोष्ठक) का उपयोग करके परिभाषित किया जाता है। सिंटैक्स निम्न प्रकार है:।
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);उदाहरण के लिए, रंग थीम प्रबंधित करने के लिए एक मैप बनाने हेतु, आप इसे नीचे दिखाए अनुसार परिभाषित कर सकते हैं:।
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);एक मैप से मान प्राप्त करना
SASS में, आप मैप से कोई मान प्राप्त करने के लिए map.get() फंक्शन का उपयोग करते हैं।
उपयोग उदाहरण:
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8.button {
9 background-color: map.get($colors, primary);
10}आउटपुट:
1.button {
2 background-color: #3498db;
3}- यह कोड
$colorsमैप सेprimaryरंग का मान प्राप्त करता है और उसे बटन के पृष्ठभूमि रंग के रूप में लागू करता है।
किसी मैप में कुंजी और मान सेट करना
map.set() फंक्शन का उपयोग करके आप निर्दिष्ट कुंजी को नया मान असाइन कर सकते हैं। यदि कुंजी पहले से मौजूद है, तो उसका मान अधिलेखित (overwrite) हो जाएगा।
उदाहरण उपयोग
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8// set danger color
9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12 background-color: map.get($updated-colors, danger);
13}- यह कोड मैप में
dangerकुंजी जोड़ता है और उसका मान बटन के पृष्ठभूमि रंग के रूप में सेट करता है।
आउटपुट
1.button-danger {
2 background-color: #e74c3c;
3}किसी मैप से कुंजी हटाना
map.remove() फंक्शन का उपयोग कर आप किसी मैप से किसी विशेष कुंजी और उसके मान को हटा सकते हैं।
उदाहरण उपयोग
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71,
6 danger: #e74c3c
7);
8
9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13 background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17 background-color: map.get($reduced-colors, danger);
18}- यह कोड मैप से
dangerकुंजी हटा देता है, इसलिएbutton-dangerकी पृष्ठभूमि का रंगnullहो जाएगा।
आउटपुट
1.button-primary {
2 background-color: #3498db;
3}किसी मैप में कुंजी और मान जोड़ना
map.merge() फंक्शन का उपयोग करके आप किसी मौजूदा मैप में नई कुंजी और मान जोड़ सकते हैं।
उदाहरण उपयोग
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (danger: #e74c3c));
9
10.button-danger {
11 background-color: map.get($extended-colors, danger);
12}- यह कोड मौजूदा SASS मैप में
dangerकुंजी जोड़ता है और उसका रंग बटन की पृष्ठभूमि के रूप में सेट करता है।
आउटपुट
1.button-danger {
2 background-color: #e74c3c;
3}किसी मैप में कई कुंजी और मान जोड़ना
map.merge() फंक्शन की मदद से आप एक साथ किसी मौजूदा मैप में कई नई कुंजी और मान जोड़ सकते हैं।
उदाहरण उपयोग
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (
9 danger: #e74c3c,
10 warning: #f39c12,
11 info: #8e44ad
12));
13
14.button-danger {
15 background-color: map.get($extended-colors, danger);
16}- यह कोड एक ही समय में मौजूदा SASS मैप में कई कुंजी और मान जोड़ता है।
किसी मैप में कुंजी की जांच करना
map.has-key() फंक्शन से आप जांच सकते हैं कि किसी मैप में कोई विशेष कुंजी मौजूद है या नहीं।
उदाहरण उपयोग
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger); // falseकिसी मैप से सभी कुंजी या मान प्राप्त करना
सभी कुंजी प्राप्त करना
map.keys() फंक्शन का उपयोग करके आप सभी कुंजी प्राप्त कर सकते हैं।
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)सभी मान प्राप्त करना
map.values() फंक्शन का उपयोग करके आप सभी मान प्राप्त कर सकते हैं।
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)किसी मैप पर लूप लगाना
SASS में, आप मैप पर लूप लगाने के लिए @each निर्देश का उपयोग कर सकते हैं।
उदाहरण उपयोग
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $color in $colors {
8 .color-#{$name} {
9 background-color: $color;
10 }
11}- यह कोड SASS मैप में हर कुंजी और मान पर लूप लगाता है और प्रत्येक रंग के लिए अपने आप एक क्लास बनाता है।
आउटपुट
1.color-primary {
2 background-color: #3498db;
3}
4
5.color-secondary {
6 background-color: #2ecc71;
7}
8
9.color-danger {
10 background-color: #e74c3c;
11}नेस्टेड मैप्स को संभालना
मैप्स में नेस्टेड संरचना भी हो सकती है। ऐसी स्थिति में, नेस्टेड map.get() फंक्शन का उपयोग करें।
उदाहरण उपयोग
1@use "sass:map";
2
3$themes: (
4 light: (
5 background: #ffffff,
6 text: #000000
7 ),
8 dark: (
9 background: #000000,
10 text: #ffffff
11 )
12);
13
14body {
15 background-color: map.get(map.get($themes, light), background);
16 color: map.get(map.get($themes, light), text);
17}- यह कोड नेस्टेड SASS मैप से
lightथीम के लिए पृष्ठभूमि और टेक्स्ट रंग प्राप्त करता है और उन्हेंbodyपर लागू करता है।
आउटपुट
1body {
2 background-color: #ffffff;
3 color: #000000;
4}मैप का उपयोग का मामला: रिस्पॉन्सिव डिज़ाइन
मैप्स का उपयोग करके आप आसानी से मीडिया क्वेरी और रिस्पॉन्सिव डिज़ाइन को प्रबंधित कर सकते हैं।
उदाहरण उपयोग
1$breakpoints: (
2 small: 480px,
3 medium: 768px,
4 large: 1024px
5);
6
7@each $label, $size in $breakpoints {
8 @media (max-width: $size) {
9 .container-#{$label} {
10 width: 100%;
11 }
12 }
13}- यह कोड SASS मैप का उपयोग प्रत्येक ब्रेकप्वाइंट के लिए अपने आप रिस्पॉन्सिव कंटेनर क्लासेस बनाने हेतु करता है।
आउटपुट
1@media (max-width: 480px) {
2 .container-small {
3 width: 100%;
4 }
5}
6
7@media (max-width: 768px) {
8 .container-medium {
9 width: 100%;
10 }
11}
12
13@media (max-width: 1024px) {
14 .container-large {
15 width: 100%;
16 }
17}निष्कर्ष
SASS मैप्स आपकी स्टाइलशीट को व्यवस्थित करने, लचीलापन और पुन: उपयोगिता बढ़ाने के लिए एक शक्तिशाली टूल हैं। उनका उपयोग कई स्थितियों में किया जा सकता है, जैसे मान प्रबंधन, लूपिंग और रिस्पॉन्सिव डिज़ाइन लागू करने में।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।