Skip to main content

Introduction to Sass Map Functions

Sass Map Functions​

Sass provides several built-in functions for working with maps, which are collections of key-value pairs that allow you to store and retrieve data in a structured way.

Here are some of the most commonly used Sass map functions:

  • map-get($map, $key) - This function retrieves the value associated with a specific key in a map.
$colors: (primary: #007bff, secondary: #6c757d);
color: map-get($colors, primary); // Output: #007bff
  • map-merge($map1, $map2) - This function merges two maps together.
$map1: (key1: value1, key2: value2);
$map2: (key2: newvalue2, key3: value3);
$new-map: map-merge($map1, $map2); // Output: (key1: value1, key2: newvalue2, key3: value3)

  • map-keys($map) - This function returns a list of keys in a map.
$colors: (primary: #007bff, secondary: #6c757d);
$list: map-keys($colors); // Output: primary, secondary
  • map-values($map) - This function returns a list of values in a map.
$colors: (primary: #007bff, secondary: #6c757d);
$list: map-values($colors); // Output: #007bff, #6c757d
  • map-has-key($map, $key) - This function returns true if a map contains a specific key.
$colors: (primary: #007bff, secondary: #6c757d);
$has-key: map-has-key($colors, primary); // Output: true
  • map-remove($map, $key) - This function removes a specific key and its associated value from a map.
$colors: (primary: #007bff, secondary: #6c757d);
$new-map: map-remove($colors, primary); // Output: (secondary: #6c757d)
  • map-contains($map, $value) - This function returns true if a map contains a specific value.
$colors: (primary: #007bff, secondary: #6c757d);
$has-value: map-contains($colors, #007bff); // Output: true
  • map-has-value($map, $value) - This function returns true if a map contains a specific value.
$colors: (primary: #007bff, secondary: #6c757d);
$has-value: map-has-value($colors, #6c757d); // Output: true
  • map-length($map) - This function returns the number of key-value pairs in a map.
$colors: (primary: #007bff, secondary: #6c757d);
$length: map-length($colors); // Output: 2
  • map-compact($map) - This function removes any key-value pairs from a map where the value is null or false.
$map: (key1: value1, key2: null, key3: false, key4: value4);
$new-map: map-compact($map); // Output: (key1: value1, key4: value4)
  • map-has-keys($map, $keys...) - This function returns true if a map contains all of the specified keys.
$colors: (primary: #007bff, secondary: #6c757d, tertiary: #28a745);
$has-keys: map-has-keys($colors, primary, tertiary); // Output: true
  • map-get-default($map, $key, $default) - This function retrieves the value associated with a specific key in a map, or returns a default value if the key is not found.
$colors: (primary: #007bff, secondary: #6c757d);
$value: map-get-default($colors, tertiary, #dc3545); // Output: #dc3545

How to Use Sass Map Functions​

To use Sass map functions, you first need to define a map in your Sass code. A map is a collection of key-value pairs enclosed in parentheses and separated by commas.

As an example:

$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745,
  danger: #dc3545,
  warning: #ffc107,
  info: #17a2b8
);

Once you have defined a map, you can use Sass map functions to access or manipulate the data in the map.

As an example:

Using map-get() function to retrieve a value from a map:

.nav-link {
  color: map-get($colors, primary);
  background-color: map-get($colors, info);
}

By using maps and map functions, you can make your Sass code more efficient and organized.