Sass map-get() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 68 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The map-get() function in Sass is an essential tool for working with maps (associative arrays). Maps in Sass are collections of key-value pairs, and map-get() allows you to retrieve the value associated with a specific key.

This function is particularly useful for managing complex variables, such as theme settings or configuration options, where related values are grouped together in a map.

💡 Syntax

The syntax of the map-get() function is straightforward. It requires two arguments:

Syntax

Copied

map-get(map, key)

🔢 Parameters

map: The map that contains the key-value pairs.
key: The key for which you want to obtain the corresponding value.

↩️ Return Value

The function returns the value associated with the specified key in the map. If the key does not exist in the map, null is returned.

📝 Example Usage

Let's explore some examples to understand how map-get() can be effectively used in different scenarios.

📜 Example 1: Basic Usage

example.scss

Copied

$colors: (
  'primary': #ff0000,
  'secondary': #00ff00,
  'tertiary': #0000ff
);

$primary-color: map-get($colors, 'primary');

body {
  background-color: $primary-color;
}

In this example, the map $colors contains three key-value pairs. The map-get() function retrieves the value associated with the 'primary' key, which is then used as the background color for the body element.

📜 Example 2: Nested Maps

example.scss

Copied

$theme: (
  'colors': (
    'primary': #ff0000,
    'secondary': #00ff00
  ),
  'fonts': (
    'main': 'Arial, sans-serif',
    'heading': 'Georgia, serif'
  )
);

$primary-color: map-get(map-get($theme, 'colors'), 'primary');
$main-font: map-get(map-get($theme, 'fonts'), 'main');

body {
  color: $primary-color;
  font-family: $main-font;
}

This example demonstrates how map-get() can be used to retrieve values from nested maps. The $theme map contains two maps ('colors' and 'fonts'), and map-get() is used twice to extract the desired values.

📜 Example 3: Using Variables as Keys

example.scss

Copied

$buttons: (
  'default': #cccccc,
  'primary': #ff5733,
  'danger': #c70039
);

$type: 'danger';
$button-color: map-get($buttons, $type);

.button {
  background-color: $button-color;
}

In this example, the key used in map-get() is stored in a variable ($type). This allows for dynamic retrieval of values based on the variable's content, making your Sass more flexible and reusable.

🎉 Conclusion

The map-get() function in Sass is an indispensable tool for efficiently managing and retrieving values from maps. Whether you're working with simple maps or complex nested maps, map-get() provides a reliable way to access specific values based on keys. This function enhances the modularity and maintainability of your stylesheets, especially when dealing with large sets of related variables.

By mastering map-get(), you can create more organized and manageable Sass code, making it easier to implement and maintain consistent design patterns across your projects. Experiment with map-get() in various scenarios to fully appreciate its capabilities and to streamline your Sass development process.