Sass Map Functions

Sass Map Functions क्या है?

Sass Map Functions का उपयोग Sass maps के साथ काम करने के लिए किया जाता है। Map एक key-value pair data structure होती है, जिसमें हर value एक unique key से जुड़ी होती है। यह concept programming languages के dictionary या object जैसा होता है।

Beginner के लिए आसान भाषा में:

• Map का मतलब है “नाम के साथ value”
• Key से value को easily access किया जा सकता है
• Related data को structured और organized तरीके से store किया जाता है

Sass Maps का उपयोग theme colors, font sizes, breakpoints, spacing systems और configuration data के लिए बहुत ज्यादा किया जाता है।

Sass में Map कैसे लिखी जाती है

Sass map को parentheses के अंदर key और value के रूप में लिखा जाता है।

$colors: (
  primary: blue,
  secondary: green,
  danger: red
);

यहां:

• primary, secondary, danger keys हैं
• blue, green, red उनकी values हैं

अब हम Sass Map Functions को detail में समझते हैं।

map-get() Function

map-get() क्या करता है

map-get() function map के अंदर से किसी specific key की value निकालता है।

Syntax

map-get(map, key)

Example

$colors: (
  primary: blue,
  secondary: green
);

h1 {
  color: map-get($colors, primary);
}

Explanation

इस code में:

• $colors एक map है
• primary key की value blue है
• map-get() उसी value को extract करता है

यह function इसलिए उपयोग किया जाता है ताकि hard-coded values लिखने के बजाय centralized map से value ली जा सके।

Compile होने के बाद output CSS में यह बनेगा:

color: blue;

Result में heading का text color blue होगा।

map-has-key() Function

map-has-key() क्या करता है

map-has-key() function check करता है कि map में दी गई key मौजूद है या नहीं।

Syntax

map-has-key(map, key)

Example

$colors: (
  primary: blue,
  secondary: green
);

$value-exists: map-has-key($colors, secondary);

Explanation

यह function:

• $colors map में secondary key को search करता है
• अगर key मौजूद है तो true return करता है
• अगर key नहीं है तो false return करता है

यह function condition-based logic और error prevention के लिए उपयोगी है।

map-keys() Function

map-keys() क्या करता है

map-keys() function map की सभी keys की list return करता है।

Syntax

map-keys(map)

Example

$colors: (
  primary: blue,
  secondary: green,
  danger: red
);

$all-keys: map-keys($colors);

Explanation

इस example में:

• map की सभी keys extract की जाती हैं

Result list होगी:

primary secondary danger

यह function loops में बहुत useful होता है, जहां हर key पर styling apply करनी हो।

map-values() Function

map-values() क्या करता है

map-values() function map की सभी values की list return करता है।

Syntax

map-values(map)

Example

$colors: (
  primary: blue,
  secondary: green,
  danger: red
);

$all-values: map-values($colors);

Explanation

यह function:

• map की सभी values निकालता है

Result list होगी:

blue green red

यह function तब उपयोग किया जाता है जब केवल values पर operation करना हो।

map-merge() Function

map-merge() क्या करता है

map-merge() function दो maps को merge करके एक नई map बनाता है।

Syntax

map-merge(map1, map2)

Example

$default-theme: (
  primary: blue,
  secondary: green
);

$custom-theme: (
  secondary: purple,
  danger: red
);

$final-theme: map-merge($default-theme, $custom-theme);

Explanation

इस code में:

• $default-theme और $custom-theme दो अलग maps हैं
• map-merge() दोनों को combine करता है
• Same key होने पर दूसरी map की value overwrite हो जाती है

Final map बनेगी:

(
  primary: blue,
  secondary: purple,
  danger: red
)

यह function theming systems और configuration override के लिए बहुत उपयोगी है।

map-remove() Function

map-remove() क्या करता है

map-remove() function map से एक या एक से ज्यादा keys को remove करता है।

Syntax

map-remove(map, key...)

Example

$colors: (
  primary: blue,
  secondary: green,
  danger: red
);

$new-colors: map-remove($colors, danger);

Explanation

यह function:

• $colors map से danger key को हटा देता है

Result map होगी:

(
  primary: blue,
  secondary: green
)

यह function तब उपयोगी होता है जब map से unnecessary data हटाना हो।

Sass Map Functions List

Function Name	Description
map-get()	map से value निकालता है
map-has-key()	key की मौजूदगी check करता है
map-keys()	सभी keys की list देता है
map-values()	सभी values की list देता है
map-merge()	दो maps को merge करता है
map-remove()	map से key remove करता है

Sass Map Functions का Practical Use

Sass Map Functions का real-world उपयोग:

• Theme colors और dark/light mode management
• Responsive breakpoints define करने में
• Design tokens और configuration data store करने में
• Large-scale CSS को clean और maintainable बनाने में

इस chapter को पढ़ने के बाद beginner-level user Sass Maps और उनके functions को clearly समझ सकता है और professional-level structured styling systems बना सकता है।