Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AWS AI GO KOTLIN SASS VUE GEN AI SCIPY CYBERSECURITY DATA SCIENCE
     ❯   

Sass Map Functions


Sass Map Functions

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

Tip: It is also possible to use the List functions from the previous page, with maps. Then the map will be treated as a list with two elements.

Sass maps are immutable (they cannot change). So, the map functions that return a map, will return a new map, and not change the original map.

The following table lists all map functions in Sass:

Function Description & Example
map-get(map, key) Returns the value for 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 whether 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 map.

Example:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-keys($font-sizes)
Result: "small", "normal, "large"
map-merge(map1, map2) Appends map2 to the end of map1.

Example:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
$font-sizes2: ("x-large": 30px, "xx-large": 36px)
map-merge($font-sizes, $font-sizes2)
Result: "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px
map-remove(map, keys...) Removes the specified keys from map.

Example:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-remove($font-sizes, "small")
Result: ("normal": 18px, "large": 24px)
map-remove($font-sizes, "small", "large")
Result: ("normal": 18px)
map-values(map) Returns a list of all values in map.

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

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2023 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.