SCSS map物件

如果說scss的list對應於JavaScript陣列，那麼scss的map就對應這個JavaScript物件直接量。

它是一種對映任何型別鍵值對（可以是任何型別，包括內嵌maps，不過不推薦這種內嵌方式）的資料結構。

程式碼例項:

[Scss] 純文字檢視 複製程式碼
$map: ( 
  $key1: value1, 
  $key2: value2, 
  $key3: value3 
)

上面是scss中map的一個簡單程式碼例項，再來看一下JavaScript物件直接量的結構:

[JavaScript] 純文字檢視 複製程式碼
var object= {
  webName:"螞蟻部落",
  age:4,
  address:"青島市南區"
}

是不是結構上非常的相似，下面就對scss中的map語法結構做一下說明:

（1）.map名稱前要有一個$。

（2）.名稱後面是一個冒號。

（3）.冒號後面是小括號。

（4）.小括號中的資料是以key:value鍵值對的形式存在的。

（5）.鍵值對之間使用逗號分隔，最後一個後面無需逗號。

map中可以巢狀map，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
$map: ( 
  key1: value1, 
  key2: ( 
    key-1: value-1, 
    key-2: value-2, 
  ), 
  key3: value3 
);

map在很多應用中是非常便利的，比如網站的皮膚管理，就可以將皮膚的樣式儲存在巢狀的map中。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
$theme-color: ( 
  default: ( 
    bgcolor: #fff, 
    text-color: #444, 
    link-color: #39f 
  ), primary:( 
    bgcolor: #000, 
    text-color:#fff, 
    link-color: #93f 
  ), negative: ( 
    bgcolor: #f36, 
    text-color: #fefefe, 
    link-color: #d4e 
  ) 
)

scss內建了七個用來專門操作map的函式:

（1）.map-get($map,$key)：根據給定key，返回map中對應的value。

（2）.map-merge($map1,$map2)：將兩個map合併成一個新的map。

（3）.map-remove($map,$key)：從map中刪除一個key，返回一個新map。

（4）.map-keys($map)：返回map中所有的key。

（5）.map-values($map)：返回map中所有的value。

（6）.map-has-key($map,$key)：根據給定key判斷map是否有對應value，有返回true，否則false。

（7）.keywords($args)：返回一個函式的引數，這個引數可以動態的設定key和value。

非常的簡單，具體函式的使用這裡就不演示了，可以參閱相關官方文件。