初探 Sass Maps 與使用介紹

日期：2015.07.15
留言數：0
標籤：sass sass map 技巧教學觀念

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 玩玩看

用迴圈跑 Sass Maps

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

假設今天要做一個選單組合，而每個選單的背景顏色都不一樣，我們可以先用 Sass Maps 定義好每個選單的顏色：

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

.menu a {
  color: #fff;
}

接下來用迴圈跑出menu1到menu5的顏色以及: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

使用 sass 有效控管 z-index 圖層順序

日期：2014.06.29
留言數：0
標籤：sass 技巧觀念

利用z-index可以讓多個圖層互相重疊，這件事情已經不稀奇了。但假設今天碰到複雜的版面，需要很多個z-index圖層，通常我們會用99,100,101,9999… 這種無限上綱的的寫法。

但其實，這不是一種好的寫法，因為寫到最後你會不知道現在寫到哪個數字？如果是多人寫一份網站，維護也很不容易，說不定最後為了省麻煩，會 99999 不知道 9 到幾位數去 OTL…。為了解決這個問題，我們可以使用 SASS 幫我們有效管理z-index喲！

使用 SASS 管理 z-index

讓我們先從簡單的 Layout 來看，這邊有三個圖層，分別是header, nav, modal。我們最後希望的排列效果如下圖所示：

如果是用 CSS，只要注意每個圖層的先後順序，再指定相對大的值就可以了。寫法也如同圖片上的z-index數字。

接下來讓我們使用 SASS 換個寫法吧！

一開始我們先使用 SASS 的變數，幫每個 DIV 設定相對應的值：

$elements: header-bar, navi, modals;

element以及後面對應的值都可以依照你的喜好作調整。為了方便日後維護，將值寫成跟class相同是個不錯的選擇。

接著設定每個 class 的z-index：

.header-bar {
  /* z-index: 1 */
  z-index: index($elements, header-bar);
}

.modals {
  /* z-index: 3 */
  z-index: index($elements, modals);
}
        
.navi {
  /* z-index: 2 */
  z-index: index($elements, navi);
}

z-index會根據我們前面的設定，找到對應的數字填入。如果最前面的設定值有所更動，每次 compile 之後都會幫我們重新計算z-index，我們就不用因為多增加一個 div，而要回頭調整z-index的順序喲！

這並不是 SASS 為了解決z-index所提出的方法，我們只是單純利用 SASS 的 index function 幫我們做到這件事情。

index($list, $value)
// Returns the position of a value within a list.(回傳 $value 在 $list 裡的順序，也可看成是索引)
SASS index function

因此Function index回傳的會是一個索引值，我們就利用這個特性套在z-index身上，達成幫我們管理z-index的目標。

有了這個規律後，如果今天接到一個複雜的網站專案，也可以將z-index獨立出來做成一份_zindex.scss。

$elements: img-cover, header-bar, navi, modals, tooltip;
$modal-elements: fields, com-dropdown, form, msg-errors, btn-close;

.img-cover {
  z-index: index($elements, img-cover);
}

.modals {
  .fields {
    z-index: index($modal-elements, fields);
  }
}

結論

雖然這只是一個 SASS Function 的簡單運用，但是卻很實用，所以在這邊分享給大家。對我來說，要手動管理z-index真的會很煩，用這種層級管理可以一目了然，又不用重新修改一堆程式碼，真的超好用的 XD。

此篇文章的概念取自 Sassy Z-Index Management For Complex Layouts。
Hugo Giraudel 有分享他的另一種解法：http://sassmeister.com/gist/11172138，但我個人比較喜歡 Jackie Balzer 的(小聲 XD