(11) SCSS練功坊-Map

發表於 更新於 分類於
使用 scss map 建立陣列

建立map

在 scss 裡，我們可以用 map 來將多個變數整合在一個 map 裡。 map 就像 Js的陣列一樣，有key和 value。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$primary: #326dee;
$secondary: #1ac888;
$error: #d32752;
$info: #f6c31c;

// color plattes
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
);

使用 map 方法

有了 map 後，可以使用 map 的方法來對陣列操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.test-btn {
  background: map-get($colors, "purple");
}

// map-get 取得map裡指定key的值
@debug map-get($colors, "purple");  // #326dee;

// map-has-key 確認陣列裡是否有指定的key，有回傳 true，否回傳false
@debug map-has-key($colors, "secondary"); // true
@debug map-has-key($colors, "tertiary");  // false

// map-remove 移除map裡的key
@debug map-remove($colors, "primary");

// map-merge 合併兩個map
@debug map-merge($colors, ("pink": #ffc0cb));