![\"Map](\"http:\/\/vanseodesign.com\/blog\/wp-content\/uploads\/2016\/06\/map-italy.jpg\")
<\/figure>\nI\u2019ve been talking about data types, operators, and functions<\/a> for awhile now, having covered numbers<\/a>, strings<\/a>, colors<\/a>, colors again<\/a>, lists<\/a> and list functions<\/a>. This post brings us to the last data type, maps.<\/p>\n Maps are similar to lists, but they take lists one better. Instead of values being stored only with a numbered index, each value is associated with a key name. That allows you to store data in a way that makes it easier to retrieve and use.<\/p>\n Where Sass lists are similar to the generic arrays of most programming languages, Sass maps<\/a> are similar to associative arrays. They allow you to associate every value with a keyword or key name so the value can be referenced by name instead of by a numbered index.<\/p>\n When you declare a map you declare key: value pairs as opposed to values only.<\/p>\n [code type=css] Unlike lists, the parenthesis are necessary and you must separate each key: value pair with a comma. You can, however, use multiple lines and you\u2019ll likely want to for maps containing more than a few key: value pairs.<\/p>\n [code type=css] The keys and values can be any object in Sass and while each key can only have a single value associated with it, the values can be lists of values. You can also associate any value with more than one key.<\/p>\n Like lists, maps have no special operators associated with them. You use map functions to manipulate maps.<\/p>\n Maps can be thought of as a special type of list so all maps are also lists. The reverse isn\u2019t true. Each key\/value pair in a map is treated as a nested list when a map is used in a list function. This means all the list functions can also be used to manipulate maps further increasing they ways you can work with maps.<\/p>\n [code type=css] Here key1: value1 becomes one nested list, key2: value2 another and so on. The first index of $map would be the list key1: value1. Each successive index is the next key\/value pair interpreted as another nested list.<\/p>\n One downside to maps is they have no CSS equivalent and so you can\u2019t directly output<\/a> a map as CSS. Trying to do so will produce an error. Instead you want to use the inspect($value) function, which converts $value into a string that can be output to CSS. You can, however, directly output the value part of a key\/value pair as CSS as we\u2019ll see momentarily.<\/p>\n Like lists, maps are immutable. Map functions<\/a> return a new map rather than changing the existing map. If you want to save a copy of the returned map, you\u2019ll need to assign the returned key\/value pairs to a new map.<\/p>\n To find the value of a known key you can use the map-get($map, $key)<\/strong> function. In the following example I created a map named $margin with four key\/value pairs for margin-top, margin-right, etc. I use the map-get() function to find the value for the margin-right key and then set it as the right margin of an h1.<\/p>\n [code type=css] h1 { The Sass compiles to:<\/p>\n [code type=css] When using a map<\/a> in a function or mixin, you may not know the key names in advance. In that case you can get a list of all the keys a map contains with the map-keys($map)<\/strong> function.<\/p>\n [code type=css] map-keys($margin) => margin-top, margin-right, margin-bottom, margin-left Similarly if you want a list of all the values in a map you can use the map-values($map)<\/strong> function.<\/p>\n [code type=css] map-values($margin) => 10px, 20px, 30px, 40px Instead of getting a complete list of keys you can test to see if a specific key exists using the map-has-key($map, $key)<\/strong> function.<\/p>\n [code type=css] map-has-key($margin, margin-left) => true You aren\u2019t limited to reading the keys and values of maps or testing to see if certain keys are present. You can remove key\/value pairs with the map-remove($map, $keys\u2026)<\/strong> function.<\/p>\n [code type=css] map-remove($margin, margin-top, margin-bottom) => (margin-right: 20px, margin-left: 40px) As I mentioned earlier, the returned map is different than the original, if you want to save it you need to assign the returned values to a new map.<\/p>\n [code type=css] $margin–2 would then contain only the remaining two key\/value pairs.<\/p>\n [code type=css] If you want to add items to a map you can use the map-merge($map1, $map2)<\/strong> function, which combines two maps, adding the second one to the first one.<\/p>\n [code type=css] $margin-2: ( $margin-3: map-merge($margin-1, $margin-2); This would lead to the following being stored in $margin-3 and $margin-4.<\/p>\n [code type=css] $margin-3: ( One last function is the keywords($args)<\/strong> function, which you might use to get a map of named arguments that have been passed to a function or mixin.<\/p>\n In the following example I created a mixin<\/a> that takes some number of $arguments. I also created a map of $margins that should look familiar by now. Finally I included the $margins map as the $arguments passed to the mix.<\/p>\n [code type=css] $margins: ( @include margin($margins); What you should note is the use of keywords($args). @debug<\/a> prints the results to the standard error output stream and what\u2019s on the right side of the \/\/ is what would be output.<\/p>\n The function returns the key\/value pairs as a string and not a map. Notice that the $ before the values has been removed in the output. I\u2019m not entirely sure when or if you would use the keywords($args) function aside from debugging, but it\u2019s there for you to use.<\/p>\nSass Maps<\/h2>\n
\n$map: (key1: value1, key2: value2, key3: value3);
\n[\/code]<\/p>\n
\n$map: (
\n key1: value1,
\n key2: value2,
\n key3: value3
\n);
\n[\/code]<\/p>\n
\n$map: (key1: value1, key2: value2, key3: value3);
\n[\/code]<\/p>\nMap Functions<\/h2>\n
\n$margin: (
\n margin-top: 10px,
\n margin-right: 20px,
\n margin-bottom: 30px,
\n margin-left: 40px
\n);<\/p>\n
\n margin-right: map-get($margin, margin-right);
\n}
\n[\/code]<\/p>\n
\nh1 {
\n margin-right: 20px;
\n}
\n[\/code]<\/p>\n
\n$margin: (
\n margin-top: 10px,
\n margin-right: 20px,
\n margin-bottom: 30px,
\n margin-left: 40px
\n);<\/p>\n
\n[\/code]<\/p>\n
\n$margin: (
\n margin-top: 10px,
\n margin-right: 20px,
\n margin-bottom: 30px,
\n margin-left: 40px
\n);<\/p>\n
\n[\/code]<\/p>\n
\n$margin: (
\n margin-top: 10px,
\n margin-right: 20px,
\n margin-bottom: 30px,
\n margin-left: 40px
\n);<\/p>\n
\nmap-has-key($margin, margin-side) => false
\n[\/code]<\/p>\n
\n$margin: (
\n margin-top: 10px,
\n margin-right: 20px,
\n margin-bottom: 30px,
\n margin-left: 40px
\n);<\/p>\n
\n[\/code]<\/p>\n
\n$margin-2: map-remove($margin, margin-top, margin-bottom);
\n[\/code]<\/p>\n
\n$margin-2 (
\n margin-right: 20px,
\n margin-left: 40px
\n);
\n[\/code]<\/p>\n
\n$margin-1: (
\n margin-top: 10px,
\n margin-right: 20px
\n);<\/p>\n
\n margin-bottom: 30px,
\n margin-left: 40px
\n);<\/p>\n
\n$margin-4: map-merge($margin-2, $margin-1);
\n[\/code]<\/p>\n
\n$margin-3: (
\n margin-top: 10px,
\n margin-right: 20px,
\n margin-bottom: 30px,
\n margin-left: 40px
\n);<\/p>\n
\n margin-bottom: 30px,
\n margin-left: 40px,
\n margin-top: 10px,
\n margin-right: 20px
\n);
\n[\/code]<\/p>\n
\n@mixin margin($args…) {
\n @debug keywords($args); \/\/ (margin-top: 10px, margin-right: 20px, margin-bottom: 30px, margin-left: 40px)
\n}<\/p>\n
\n margin-top: 10px,
\n margin-right: 20px,
\n margin-bottom: 30px,
\n margin-left: 40px
\n);<\/p>\n
\n[\/code]<\/p>\nClosing Thoughts<\/h2>\n