###### tags: `SCSS`
# scss 顏色變數命名

因執行某個專案時，設計的layout有各種不同深淺的灰色，在scss變數命名時困擾了很久，當時參考了網路上的命名方式。


參考網路上的命名方式：

但這裡出現一個問題！！😱😱😱
比如：dimgray(暗灰色)、gainsboro(格斯伯勒)等，但因為這些專有的英文顏色名稱沒有特別去背，變成每次如果要用到某色系，還是必須回到`variables.scss`的檔案去查看和複製，但如果我依功能性去命名顏色，比如：`$btnGray`，但這樣在使用顏色變數時是不是就不是那麼靈活運用？

於是六角學院學院的雅萱學姊給我建議。🥰

雅萱：一般會建議兩種命名方式
1.顏色-數字，可參考 Bootstrap [色彩 (Color)](https://bootstrap5.hexschool.com/docs/5.0/customize/color/)
2.用主要、次要、功能之類的方式命名
但這種方式有個前提是假設你命名為按鈕色，這是否確定你所有按鈕都只有這個顏色，否則會很怪，
另外 Sass 相關的資料文章，我會推薦你去找六角學院的校長 廖洧杰 的鐵人賽文章。
[30天掌握Sass語法 系列](https://ithelp.ithome.com.tw/m/users/20040221/ironman/562)

最後決定採用 <font color="#f00">顏色+數字</font> 來命名，這樣我可以清楚知道`$gray-900`是最深的顏色，然後`$gray-100`是最亮的顏色，這樣在 `colo:`輸入變數名稱時，可以比較清楚知道這個灰色大概是用什麼的數字去命名，有個邏輯。