[SCSS小教室] 變數的命名方式與注意事項 #2

標籤: , , ,

不知道大家在使用SCSS的時候有沒有想過,變數要怎麼命名比較好?
好不容易有一這麼方便的變數功能當然要充分的利用。

這邊跟大家介紹一下以小女子目前寫SCSS的經驗,提幾點需要注意的地方與怎麼命名比較好。

1. 不要以顏色來命名變數。
不OK的,例如:$color-pink:pink與$color-lightblue:lightblue
這個命名方式是最容易犯的,變數應該要有廣泛運用的彈性。意思就是說這個變數需要能在各種情況下使用。建議是以這個變數的意義去命名比較好。
比較OK的,例如:$color-primary:pink
這個變數名字通常用來表示主要顏色(網站主要顏色)

假設你以$color-pink來當做主顏色,後來因為某些原因需要換顏色,這個變數就需要更改其名字。如果以$color-pimary來命名,你只需要更改屬性命名還是可以繼續使用,例如:$color-pimary:pink或$color-pimary:lightblue。

2.依照功能和畫面意義去命名變數。
最常見的命名方式是 $btn-warn、$btn-success或是$dialog-bg、$dialog-text等。
$ 功能 – 樣式 的方式去命名,功能是按鈕,樣式有成功狀態的按鈕或是警告狀態的按鈕。畫面意義是在這個網頁中此物件存在的意義是什麼,例如:你在做一個人作品集網站,其中有一個區塊是自我介紹,那麼你就可以這樣命名 $intro-bg 自我介紹區塊的背景 $intro-text 文字顏色,以 $畫面意義 – 需要被定義的樣式 的方式去命名變數。

3.注意變數的可塑性。
好的變數可以彈性衍生,讓變數之間的關西變得明確好懂。例如:你做了一個活動網站,其中活動有節慶活動、日常活動、特殊活動等不同的活動類型,如果這三個活動樣式都差不多,只有其中幾個活動需要特別不一樣的樣式,那麼就可以思考以 $activity-bg、$activity-bg-狀態 的方式去命名,不要以 $activity-bg-節慶活動、$activity-bg-日常活動、$activity-bg-特殊活動這樣的命名方式,因為這樣的變數不夠泛用太單一性。

總結
目前我想到就以上三點,之後有想到比較好的命名方式再放上來補充。
變數命名就像是Class的命名,都有一些學問。
(說到Class的命名方式,之後來講講CSS架構好了,我是用BEM架構coding。)
好的命名方式可以讓你在開發的時候比較好管理檔案加快工作效率也可以規範團隊coding standard。以上是我製作過程中覺得需要被注意的部分,有任何玩家覺得需要修正或分享的都歡迎在底下留言,既然都使用了SCSS就要讓他變得更好用!

延伸閱讀
SCSS小教室文章列表



相關文章

快速製作 HTML 表格 (HTML Table) 今天要和大家分享一些工具,我覺得真的實在是太厲害了,不懂 HTML 也沒關西只要將試算表 ( Excel ) 的檔案輸出成 CSV 檔案即可快速產生 HTML表格。這樣看下來是不是覺得很厲害呢?現在 ...
如何寫SCSS #1-1 上篇跟大家提到如何開始寫SCSS的時候有推薦一個工具,但是其實有更好的編譯方式,只要下載 VS code 的外掛就可以馬上編譯。 這款外掛就是:Live Sass Compiler 下載好VScod...
Slider and Carousel 幻燈片( 新增 Swiper API ) 今天要跟大家介紹幻燈片的小工具,幻燈片可以說是讓網頁瞬間升級最方便的功能之一了!如果能夠自己寫當然是最好的,但是如果沒有什麼基礎又想做出幻燈片的功能?推薦幾個開放原始碼的網站給你們參考~就能擁有厲害的...
One Page Scroll 判斷目前所在區塊(4/19更新說明)...   什麼是 One Page Scroll 呢? 概念類似垂直的幻燈片,只是操控的方式是以滑動(觸控螢幕,ex:手機)/ 滾輪(電腦)來進行,一樣可以點這個點翻動到此頁,也可以用...