Maps

今天要來介紹的是在Sass內非常重要而且常用的一個功能 - Maps
之前有提到Maps是一種Key-Value的表示方式，活用的話可以提高程式碼的可讀性~
那我們話不多說馬上來練習，打開專案內的_variables.scss，裡面有我們之前寫的顏色:

// colors
$primary: #0058E6;
$secondary: #00F26D;
$warning: #F5BD2D;

我們把它用Map的方式改寫，順便加上多一點顏色:

// colors
$colors: (
  "primary": #0058E6,
  "secondary": #00F26D,
  "warning": #F5BD2D,
  "error": #D32752,
  "info": #F6C31C,
  "blue": #1919E6,
  "red": #E61919,
  "yellow": #E6E619,
  "green": #19E635,
  "orange": #FFA600,
  "purple": #9900FF,
  "gray": #808080,
  "black": black,
  "white": white,
);

要使用的話Map有提供一些方法可以調用:

// 取得 primary 的顏色色碼(最常用)
@debug map-get($colors, "primary"); // #0058E6

// 檢核map裡面是否有 secondary 這個Key
@debug map-has-key($colors, "secondary"); // true
// 檢核map裡面是否有 pink 這個Key
@debug map-has-key($colors, "pink"); // false

// 將 primary 這組從map中移除
@debug map-remove($colors, "primary");

// 將兩個Map合起來
@debug map-merge($colors, ("pink": #FFC0CB));

今天就介紹到這，之後我們也會常常用到Map，大家一定要非常熟悉Map~