fi3ework's Studio.


2017/06/19 Share


6.3.3. Maps

Maps represent an association between keys and values, where keys are used to look up values. They make it easy to collect values into named groups and access those groups dynamically. They have no direct parallel in CSS, although they’re syntactically similar to media query expressions:

> scss $map: (key1: value1, key2: value2, key3: value3);


Unlike lists, maps must always be surrounded by parentheses and must always be comma-separated. Both the keys and values in maps can be any SassScript object. A map may only have one value associated with a given key (although that value may be a list). A given value may be associated with many keys, though. Like lists, maps are mostly manipulated using SassScript functions. The map-get function looks up values in a map and the map-merge function adds values to a map. The @each directive can be used to add styles for each key/value pair in a map. The order of pairs in a map is always the same as when the map was created. Maps can also be used anywhere lists can. When used by a list function, a map is treated as a list of pairs. For example, (key1: value1, key2: value2) would be treated as the nested list key1 value1, key2 value2 by list functions. Lists cannot be treated as maps, though, with the exception of the empty list. () represents both a map with no key/value pairs and a list with no elements. Note that map keys can be any Sass data type (even another map) and the syntax for declaring a map allows arbitrary SassScript expressions that will be evaluated to determine the key. Maps cannot be converted to plain CSS. Using one as the value of a variable or an argument to a CSS function will cause an error. Use the inspect($value) function to produce an output string useful for debugging maps.


Maps代表键值对之间的映射,通过key来索引value。这使得可以很容易的将值集合在对象中并且能够动态的更新对象。CSS语法中没有直接与Map对应的语法,尽管Map的语法很像是media query表达式

scss $map: (key1: value1, key2: value2, key3: value3);

与list不同,map必须包含在一对圆括号中,也必须使用逗号分隔。键与值可以为ScssScript中的 任何对象。在一个map中,一个key只能对应一个value(value可以是list),但一个value可以对应多个key。与list类似,map一般用来进行ScssScript的操作,map-get函数用来在map中索引,map-merge函数用来向map添加键值对。@each命令可以给map中的键值对添加样式。map中键值对的顺序取决于创建时的顺序。凡是可以使用list的地方都可以使用map,当list的函数操作map时,会将map看做一个由键值对组成的数组。比如(key1: value1, key2: value2)会被看成嵌套的list:[key1, value1],[key2, value2](待定)。但是list不能被当做map使用,除了空数组。()既代表一个空数组也代表一个没有键值对的map。key可以为任何的Sass数据格式(可以是另一个map)。Map不能直接转换为CSS语法,当被CSS函数当做值或者变量或者参数时将会导致错误,使用inspect($value)函数可以用来生成调试map的字符串函数。

  1. 1. 6.3.3. Maps