[Sass] Structure of Color Variables (顏色變數結構方式)

關於 Sass 的顏色變數如何提出、結構化進而降低維護成本，

網路上主要的兩種想法

1. 依顏色命名變數，在樣式內直接使用顏色名稱變數。

$blue-cornflower: #6195ED;
$blue-san-marino: #3F64A2;

.class-a {
  color: $blue-cornflower;
}

.class-b {
  color: $blue-san-marino;
} 

重點：命名獨特性，可搭配使用 Name that Color。
好處：看樣式馬上知道實際用了什麼顏色，變數簡潔不重複。
壞處：調整顏色時，新增或者減少等確認繁複。
其他：顏色獨特性 + 看了馬上知道是什麼顏色要英文夠好...

2. 定好基本顏色，多一層依照功能性命名，最終使用功能性命名的變數。

$blue-cornflower: #6195ED;
$blue-san-marino: #3F64A2;

$color-text: $blue-cornflower;
$color-link: $blue-san-marino;
$color-border: $blue-san-marino;
 
.class-a {
  color: $color-text;
  border-color: $color-border;
}

a {
  color: $color-link;
} 

好處：較有結構，不會牽一髮動全身，動的基本上就是要一起動的。
壞處：沒規劃好會更繁複，一次性部分太搞工。

考量實際使用情境

情境一：調整顏色

只需要動顏色變數的檔案，新增不同區塊或功能時才需要動其他。

情境二：想知道某一個地方的顏色色碼

直接從網頁上開「工程師工具」，觀察區塊看。

總結以上，當專案規模較大，
較適合的顏色變數命名、結構方式為混合兩者

第一層

網站主要顏色分別規劃三到五個層次，命名以主色、次要色等的方式命名，例如：blue-main、blue-secondary、...。

第二層

實際上運用到樣式裡的顏色變數，依功能性 (區塊和用途、行為、顏色等) 命名，例如：color-header-text、color-table-red、...。

其他

主要使用第二層的變數，一次性部分則直接使用第一層的變數。
另外，依據原始顏色變化的行為或功能 (hover、active 等) 的顏色，使用 Sass 提供的函式 (lighten()、darken()、saturate()、adjust_hue() 等) 以簡潔顏色的部分。

// Blue color area
$blue-main: #6195ED;
$blue-secondary: #3F64A2;
$blue-somebody: #0AA7FA;

// Red color area
$red-main: #A23F47;
$red-secondary: #FA0A1D;

// Default colors of elements, behaviors
$color-text: $blue-main;
$color-link: $blue-secondary;
$color-border: $blue-secondary;

// Functional parts
$color-header-text: $red-main;
$color-header-red: $red-main;
$color-header-blue: $blue-main;
$color-table-red: $red-secondary;
$color-table-blue: $blue-secondary;

* {
  color: $color-text;
  border-color: $color-border;
}

a {
  color: $color-link;
}

.table-a {
  .child-a, .child-c {
    background-color: $color-table-red;
  }
  .child-b {
    background-color: $color-table-blue;
  }
  .table-specific-icon {
    background-color: $blue-somebody;
  }
}

參考

Sass Color Variables That Don’t Suck

SASS & Color Variables

Quick Tip: Name Your SASS Variables Modularly

Name that Color