[Day 13] Sass - Maps

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~