初探 Sass Maps 與使用介紹

Sass Maps 是 Sass 3.3 版的新東西,我們可以利用它更有效的管理我們的變數;如果再搭配 if/else 條件式或 each 迴圈,可以寫出更簡單(也更程式導向) 的 CSS 語法。

雖然 Maps 有地圖或索引的意思,但你不妨把它想成是 JavaScript 的物件,這樣在觀念與使用上會比較接得起來 😊 ~

以往我們用 Sass 設定變數時,會用各種單字取名。通常會用這種比較沒有系統的寫法:

$font-color: #424242;
$base-color: #ff6599;
$background-color: #ebe4e8;
$light-grey: #efefef;

以上這些變數單拆開來,可能都看得懂。但真的要使用時,通常都要回頭翻閱;另外一個問題就是變數愈多管理愈不易。

所以我們可以利用 SASS Maps 幫我們解決這樣的問題。

Sass Maps 基本介紹

Sass Maps 的格式如下(Sass Maps 官方文件參考)

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

將剛剛那些變數按照 Sass Maps 格式整理一番,可以比較有系統化:

$colors: (
  lt-grey: #efefef,
  grey: #424242,
  pink: #ff6599,
);

$backgrounds: (
  lt-grey: #ebe4e8
);

/* How to use */
body {
  background: map-get($backgrounds, lt-grey);
  color: map-get($colors, pink);
}

將上面的變數根據種類 / 屬性的不同,可以變成像物件一樣,需要哪一個資料再把它取出來即可。


利用 functions 包裝 Sass Maps

Sass Maps 看起來非常簡單也好上手,對吧!

不過每次都要寫 map-get 是不是覺得有點阿雜?如果不常用可能會忘記這段語法,又要回頭找資料。

會使用 Sass 的人,從本質上就是個懶鬼無誤,所以可以少寫幾個字,我們就要努力少寫幾個字💪,所以我們來利用 functions 幫我們包裝一下這段程式碼吧!

@function color($color-name) {
  @return map-get($colors, $color-name);
}

@function background($background-name) {
  @return map-get($backgrounds, $background-name);
}

body {
  background: background(lt-grey);
  color: color(pink);
}

大家可以用 codepen 玩玩看

See the Pen jPKKqp by MUKi (@mukiwu) on CodePen.


用迴圈跑 Sass Maps

除了 functions 之外,我們也可以用迴圈跑一段 Sass Maps 唷。

假設今天要做一個選單組合:

<nav class="menu">
  a class="menu1">MENU1</a
  a class="menu2">MENU2</a
  a class="menu3">MENU3</a
  a class="menu4">MENU4</a
  a class="menu5">MENU5</a
</nav>

而每個選單的背景顏色都不一樣,我們可以先用 Sass Maps 定義好每個選單的顏色:

$menus: (
  menu1: #94a437,
  menu2: #cb0a3a,
  menu3: #5d5d5d,
  menu4: #0095a1,
  menu5: #5273d1
);

.menu a {
  color: #fff;
}

接下來用迴圈跑出menu1menu5的顏色以及:hover

@each $menu-item, $menu-color in $menus {
  .#{$menu-item} {
    background: $menu-color;
  }
  .#{$menu-item}:hover {
    background: lighten($menu-color, 15%);
  }
}

最後編譯出來的 CSS 如下:


.menu1 { background: #94a437; }
.menu1:hover { background: #b9c95e; }

.menu2 { background: #cb0a3a; }
.menu2:hover { background: #f52d5f; }

.menu3 { background: #5d5d5d; }
.menu3:hover { background: #838383; }

.menu4 { background: #0095a1; }
.menu4:hover { background: #00dced; }

.menu5 { background: #5273d1; }
.menu5:hover { background: #8ea4e1; }

有感受到,多寫一點迴圈可以省很多事情的 FU 嗎😊


我能使用 Sass Maps 嗎

文章最前面有提到,Sass Maps 是 Sass 3.3 版的新東西,因此只要你的 Sass 高於 3.3 版都可以使用喔!

簡單檢測方法,直接在 terminal 輸入sass -v就可以知道目前的 Sass 版本囉。


參考資料: Sass Maps – Jonathan Su