文章彙整

Sass Map的使用

Astral WebBy Astral Web 4 weeks agoNo Comments
首頁  /  網站設計與開發  /  前端開發  /  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的時候,要特別注意幾點

  1. 最後一個key/value後面的逗號可以省略
  2. key的名稱不能重複,否則會編譯錯誤
  3. 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);
  }
}

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

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Categories:
  前端開發網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。