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 AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS 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

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

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-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.