[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小教室文章列表



相關文章

lang 網頁的語系宣告   什麼是lang? lang 主要用來宣告網頁的語系,主要是給瀏覽器看的,所以如果要做好SEO(搜尋引擎最佳化,英语:search engine optimization)需要...
如何使用 JQuery #1   廢話不多說直接來了解如何使用吧!   第一步:引用 JQuery
Scroll Animations 網頁滾動時播放動畫   今天要介紹幾個當網頁滾輪滾動時播放動畫的製作方式,一共有4個方法,目前我最常用的是Scroll Me。其他的大家可以嘗試試看看自己喜歡哪種方式。會了這些工具可以讓網頁在瀏覽的時後比...
One Page Scroll 判斷目前所在區塊(4/19更新說明)...   什麼是 One Page Scroll 呢? 概念類似垂直的幻燈片,只是操控的方式是以滑動(觸控螢幕,ex:手機)/ 滾輪(電腦)來進行,一樣可以點這個點翻動到此頁,也可以用...

1 則迴響