【SCSS】2.6 map 與 @each 迴圈

延續上述的例子，當你以為寫到這樣就很迷人，那就錯了。

.color-primary {color: $primary;}

.color-warning {color: $warning;}

.color-xxxxx01 {color:...

.color-xxxxx02 {color:...

.color-xxxxx03 {color:...

.color-xxxxx04 {color:...

.color-xxxxx05 {color:...

程式碼就跟迷你裙一樣越短越好，當色碼超過10個，整段看起來就會很恐怖。而且一直寫重複的名稱讓我覺得自己像個智障= =|||

// Color system

//

// 先定義色碼

$blue:    #3495b5 !default;

$indigo:  #6610f2 !default;

$purple:  #6f42c1 !default;

$pink:    #f26b6b !default;

$red:     #e15449 !default;

$orange:  #fd7e14 !default;

$yellow:  #ffc107 !default;

$green:   #28a745 !default;

$teal:    #20c997 !default;

$cyan:    #17a2b8 !default;

//對變數定義map，方便之後提取『值』

$colors: () !default;

$colors: map-merge((

"blue":       $blue,

"indigo":     $indigo,

"purple":     $purple,

"pink":       $pink,

"red":        $red,

"orange":     $orange,

"yellow":     $yellow,

"green":      $green,

"teal":       $teal,

"cyan":       $cyan,

"white":      $white,

"gray":       $gray-600,

"gray-dark":  $gray-800

), $colors);

//再依照屬性做語義定義

$primary:       $blue !default;

$secondary:     $gray-600 !default;

$success:       $green !default;

$info:          $cyan !default;

$warning:       $pink !default;

$danger:        $red !default;

$light:         $gray-100 !default;

$dark:          $gray-800 !default;

//對變數定義map，方便之後提取『值』

$theme-colors: () !default;

$theme-colors: map-merge((

"primary":    $primary,

"secondary":  $secondary,

"success":    $success,

"info":       $info,

"warning":    $warning,

"danger":     $danger,

"light":      $light,

"dark":       $dark

), $theme-colors);

上述建立了2個map，分別為$colors， $theme-colors

語法範例SCSS，利用 @each 把值取出來

@each $color, $value in $theme-colors {

.bg-#{$color} {background-color: $value}

}

編譯後CSS

.bg-primary  { background-color: #3495b5;}

.bg-secondary{ background-color: rgba(0, 0, 0, 0.6);}

.bg-success  { background-color: #28a745;}

.bg-info     { background-color: #17a2b8;}

.bg-warning  { background-color: #f26b6b;}

.bg-danger   { background-color: #e15449;}

我腦內的理解是這樣



三步驟：
建立名為 $theme-colors 的 map
從 $theme-colors，   取出每一行的變數 $color 和   變數定義的 $value
指定產生的CSS要長成如何


=========我是題外話的分割線===========


給跟我一樣完全不會寫程式的設計師（看不懂變數，funtion，第一次接觸SCSS語法）一點點信心，從開始安裝軟體，查看SCSS的相關文件，編寫人生中第一隻SCSS，到現在已經過了45天，休假日耍廢了約15天，然後我寫的SCSS終於可被轉譯了～ばんざい～ばんざい～ばんざい～