Sass的變數名稱

最近在寫專案時希望能以更系統化的方式來管理css, 因此找了一些資料做參考。變數的命名聽起來簡單，實作起來卻會發現很困難，因為不僅要考慮到可讀性，也常常遇到已經訂好的命名原則卻不符合實際使用的情形。

摘要

以該顏色所描述的物件或行為來命名它。例如：以danger 取代 red, 或是success取代green

命名建議

命名應該要語意化, 以一種更抽象的思維來做命名, 以該顏色代表的意義作命名, 這樣以後會更好理解和維護

以位階來命名

將網站的幾個主色以位階來命名

1
2
3
4
5
6

// 主色
$primary: #707070;
// 第二色
$secondary: #4F73B8;
// 第三色
$tertiary: #F15A5C;

以該顏色所描述的行為或物件

1
2
3
4
5
6

// 成功
$success: #00CD98;
// 禁止
$not-allow: #F15A5C;
// 資訊/注意
$info: #4F73B8;

更加複雜的情況

若是你的色調非常多彩, 或是在應用上非常複雜, 也可以考慮在主名稱之外, 再加上詞綴

例如, 我的primary色還需要有淺和深

1
2
3

$primary: #707070;
$primary--light:
$primary--dark:

或是你的顏色會有許多色階, 也可以考慮像font-weight那樣訂定出一個階層

1
2
3
4
5

$primary: #707070;
// 淺 -> 深
$primary--100:
$primary--200:
$primary--300:

參考

Naming colours in SCSS
What do you name color variables?