Sass Map Functions

Sass Map Functions

In Sass, the map (mapping) data type represents one or more key/value pairs.

Tip:You can also use the List functions on the previous page with maps. Then the map will be treated as a list with two elements.

Sass maps are immutable (they cannot be changed). Therefore, the map functions that return a map will return a new map without changing the original map.

The following table lists all the map functions in Sass:

Functions Description & Examples
map-get(map, key)

Returns the value of the specified key in the map.

Example:

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small")

Result: 12px
map-has-key(map, key)

Checks if the map has the specified key. Returns true or false.

Example:

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-has-key($font-sizes, "big")

Result: false
map-keys(map)

Returns a list of all keys in the map.

Example:

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-keys($font-sizes)

Result: "small", "normal", "large"
map-merge(map1, map2)

will map2 attaching to map1 at the end.

Example:

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
$font-sizes2: ("x-large": 30px, "xx-large": 36px)
map-merge($font-sizes, $font-sizes2)

Results:
"small": 12px, "normal": 18px, "large": 24px,
"x-large": 30px, "xx-large": 36px
map-remove(map, keys...)

Remove specified keys from the map.

Example:

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-remove($font-sizes, "small")

Results: ("normal": 18px, "large": 24px)

map-remove($font-sizes, "small", "large")

Results: ("normal": 18px)
map-values(map)

Returns a list of all values in the map.

Example:

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-values($font-sizes)

Results: 12px, 18px, 24px