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



相關文章

判斷手機系統 為 iOS 或是 Android 今天要和大家分享一個JS語法,這個語法可以判斷手機的系統,在我們寫網頁的時候時常會遇到 iOS 和 Android 手機頁面長的不同的困擾,這時候就會覺得 iOS 很麻煩為什麼要這麼特立獨行,但是作為...
Html5 Video Autoplay 影片自動播放 今天要教大家如何製作自動播放影片的網站,有些網站會直接將影片變成首頁的背景這樣的確能夠吸引使用者的注意力而且也能夠替網站創造獨有的風格。可以看到這個免費影片素材的網站 傳送門  Banner 的部分是...
Font Awesome ( icon font ) 今天要和大家介紹 Font Awesome 這個工具的使用方式,他提供一些免費的 icon 和付費的 icon 可以使用,就目前為止我覺得他提供免費的素材還蠻夠用的。現在就要來教大家如何使用這項工具囉...
如何指定分享網址的縮圖?   當你想要分享連結的時候網頁的縮圖讓你覺得很尷尬嗎?還是網頁的縮圖不盡理想,不是很好看呢?這個時候你就可以使用這款工具,這個工具可以幫助你指定你分享網址的縮圖,不只是縮圖喔!影片也可...