Sass Map的使用

本篇文章將來教大家關於Sass Map的應用，來提升工程師在開發與維護程式時的品質，現在就讓我們一起來看看吧。

在 Bootstrap 3當中，設置button顏色的方法如下。

// Alternate buttons
// --------------------------------------------------
 
 
.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
// Success appears as green
.btn-success {
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
// Info appears as blue-green
.btn-info {
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
// Warning appears as orange
.btn-warning {
  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}

而在Bootstrap 4當中，設置的方法簡化成了

//
// Alternate buttons
//
 
 
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

這是因為 Bootstrap 4 使用了 Sass Map。

Sass Maps讓變數變成了資料的群組，有點像是json的資料組合，也有點像是javascript的物件(object)。應用得當的話、可以省去大量重覆的代碼。

基本的Sass Maps範例：

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

在寫Sass Maps的時候，要特別注意幾點：

最後一個key/value後面的逗號可以省略
key的名稱不能重複，否則會編譯錯誤
key/value的名稱可以是許多資料類型(數字、字串、布林等等)

@each批次產生樣式

原本Bootstrap 3 的寫法，每新增一組不同顏色的按鈕、就要手動新增一組設定：

.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

但在Bootstrap 4當中， @each+Sass Maps讓整個程式碼、變得簡潔多了。

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

如果需要新增新的按鈕顏色，只要在生成按鈕的程式碼之前添加顏色的設定就可以了。底下的作法是使用map-merge將$theme-colors-b和原有的$theme-colors 2個map合併起來。

$theme-colors-b: map-merge(
  (
    "bbb":  #bbb,
    "ccc":  #ccc,
    "ddd":  #ddd
  ),
  $theme-colors
);
 
 
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

以往我們從icon font 的網站下載回來的CSS大多長這樣：

.icon-star-border:before {
  content: "\e900";
}
.icon-star-full:before {
  content: "\e901";
}
.icon-graph-c:before {
  content: "\e902";
}
.icon-locator:before {
  content: "\e903";
}
.icon-medal:before {
  content: "\e904";
}
.icon-export:before {
  content: "\e905";
}
.icon-filter:before {
  content: "\e906";
}
.icon-globe:before {
  content: "\e907";
}
.icon-calendar:before {
  content: "\e908";
}
.icon-tips:before {
  content: "\e909";
}

如果我們用@each+Sass Maps 改寫就會變成這樣子：

$icons: (
    "star-border": "\e900",
    "star-full": "\e901",
    "graph-c": "\e902",
    "locator": "\e903",
    "medal": "\e904",
    "export": "\e905",
    "filter": "\e906",
    "globe": "\e907",
    "calendar": "\e908",
    "tips": "\e909"
);
 
 
@each $name, $code in $icons {
  .aaa-#{$name}:before {
    content: $code;
  }
}

是不是容易閱讀多了呢？

若是想直接提取map裡的某一組數值的話、可以使用 map-get

$mycolors: (
  $blue:    #007bff,
  $indigo:  #6610f2,
  $purple:  #6f42c1,
  $pink:    #e83e8c,
  $red:     #dc3545,
  $orange:  #fd7e14,
  $yellow:  #ffc107,
  $green:   #28a745,
  $teal:    #20c997,
  $cyan:    #17a2b8
);
 
 
.mybox{
    color: map-get($mycolors,$blue);
    background: map-get($mycolors,$purple)
}

前面icon的範例也可以改寫成底下的樣子：

$icons: (
    "star-border": "\e900",
    "star-full": "\e901",
    "graph-c": "\e902",
    "locator": "\e903",
    "medal": "\e904",
    "export": "\e905",
    "filter": "\e906",
    "globe": "\e907",
    "calendar": "\e908",
    "tips": "\e909"
);
 
 
 
 
@each $name, $code in $icons {
  .aaa-#{$name}:before {
    content: map-get($icons, $name);
  }
}

希望大家還喜歡本篇文章的資訊分享，我們會持續更新相關開發資訊，不要忘記訂閱我們的電子報，並追蹤我們的FB與IG，才能在第一時間獲得第一手資訊喔！

前端開發, 技術應用

Sass Map的使用