SCSS map 與 each 迴圈

我們都非常喜歡物件，因為相關的東西可以放在一起，相當容易理解。

SCSS 也加入了這種方便的特性，但在 SCSS 的世界裡他不叫物件，而是叫 map，讓我們來看看 map 長什麼樣子吧！

//變數：( ‘鍵’：‘值’ )
$facebook: ( 'pic': 'facebook.png', 'color': #3c5998 );

Sass 的 map 是非常常見的鍵/值對，像以上的範例，我定義了一個 $facebook 變數，它的圖片是 facebook.png，顏色是#3c5998，以下我將示範如何取出它的值：

//一個叫 facebook 的  class name
.facebook {
     background-image: url(map-get($facebook, 'pic'));  //取出 ＄facebook 的  pic
     background-color: map-get($facebook, 'color');  //取出 ＄facebook 的  color
}

map 還有許多其他方法，可以參閱 SCSS 的文件。但還是要提一下 map 與 each 迴圈的應用，可以幫我們省下不少時間。例如我把社群分享的圖片及顏色通通存入一個 map：

$share-map: (
    'facebook': ( 'pic': 'facebook.png', 'color': #3c5998 ),
    'google': ( 'pic': 'google.png', 'color': #cb3726 ),
    'email': ( 'pic': 'email.png', 'color': #666666 )
);

接著用 each 迴圈通通取出來：

//＄key 將會取出 facebook 字串,  $map 將會取出 facebook 屬定對應的 map
@each $key, $map in $share-map {
    $pic: map-get($map, 'pic');  //取出 facebook 的  pic
    $color: map-get($map, 'color'); //取出 facebook 的  color

    .#{$key} { //將 facebook 轉型，變成 class name
         background-image: url(map-get($map, 'pic'));
         background-color: $color;
    }
}

迴圈會歷遍所有內容，編譯出以下內容：

.facebook {
     background-image: url('facebook.png');
     background-color:  #3c5998;
}

.google {
     background-image: url('google.png');
     background-color:  #cb3726;
}

.email {
     background-image: url('email.png');
     background-color:  #666666;
}

map 與 each 的用途不只是方便，更棒的是他們簡化了維護的邏輯與難度，讓寫樣式的方法更聰明。