Vue專案中的css管理策略 — 利用scss將樣式模組化
因為css的特性，當對某個class給予樣式屬性後，就會是全域的作用到整個專案，不易做樣式的管理。本文會詳細介紹在大型專案中，如何統一的管理樣式、封裝樣式、重用樣式(reuse)，並且自己建構一套熟悉的主題樣式(theme)，讓各位在設計上，能有多一套樣式管理的思考方向。
常見的樣式撰寫方式
Vue專案中的樣式寫法一直都很多元，以下幾種可能是常使用的方式：
- 直接在html tag中，使用style屬性定義樣式
2. 將css寫在組件中
3. 將css寫在外部，引入到組件中
當然以上都是可行的方案，但也帶來了一些問題
傳統樣式寫法的問題
- 多處組件有相同樣式，導致有大量重複的css程式碼
- 樣式與網頁內容混雜在一起，導致維護不易、程式碼篇幅過長
- 特定樣式維護不易、需要遍地查找式的修改：網站中主要文字可能都採用某顏色，但可能某些需求原因需要改採用其他顏色，此時可能就要地毯式搜尋哪裡使用到了此顏色，去修改色碼
- 無法有效的建立主題性：在網站中，一定會有比較特定的設計，如網站中的大標題都是深藍色、28px字體大小、搭配淺灰色底線；亦或是button都有特定的hover動畫，都是在此專案/網站特有的主題樣式(theme)
優化css管理的目標
- 易維護、好管理、重用程式碼
- 樣式與html、vue邏輯分離
- 建立主題樣式
- 可快速移植熟悉的樣式設計到下一份專案
既然有這麼多好處，那我們就趕緊進到重點環節吧！
首先，我們採用sass/scss來撰寫樣式。不熟悉scss的同學，可以點我去學習一下
1. sass項目結構
在src > assets資料夾底下，新增一個名為css的資料夾
css資料夾底下，可以依據需求來建立這些資料夾項目。資料夾底下的scss檔案會以下劃線作為開頭來命名scss文件
因為以下劃線作為前綴的檔案，sass就不會將他編譯成單獨的css文件，會通過其他文件的引用，最後生成一份大的css檔案
- base：網站基本的樣式設定
├───base
│ ├───_basic.scss // 網站基本設定，如font-family等
│ ├───_float.scss // 自定義的float相關樣式
│ ...- components：組件相關的樣式
├───components
│ ├───_header.scss
│ ├───_footer.scss
│ ...- layout：整體layout上的設定，如rwd的文件
├───layout
│ ├───_rwd.scss
│ ...- pages：views相關的樣式
├───pages
│ ├───_index.scss
│ ├───_userInfo.scss
│ ├───_userSetting.scss
│ ...- utils：能幫助建構樣式的scss檔案。如變數(variable)、樣式方法(function)等
├───utils
│ ├───_function.scss
│ ├───_mixin.scss
│ └───_variables.scss- vendors：放外部提供者的css檔，而非自己寫的，都可以放在這裡
├───vendors
│ ├───_animated.scss
│ ├───_material-icon.css
│ ├───_font-awesome.css
│ ...- vendors-extensions：有時外部提供的css，有會有覆蓋重新設計的需求，就將這些檔案放在這裡
├───vendors-extensions
│ ├───_element-ui.scss
│ ...建立完所有文件後，把所有scss檔案引入到app.scss (@import時不用加下劃線)，作為唯一的scss文件import到App.vue之中。
如此一來，就可以在各個文件種引用utils/_variables.scss下的變數 (因為只編譯成一大份css檔案)，以及只有一個出口文件，清楚明瞭
將樣式引入到App.vue中
2. 漂亮的撰寫sass
我們會先在utils下的_variables先定義好網站常用的變數，再開始進行其他文件的撰寫。如此一來，就可以在其他文件引入_variables文件中的變數
這裡以 “製作一個統一樣式的hyperlink” 為例子：
首先，文件定義了網站中，主要的文字顏色及常用文字顏色的色碼，以及transition的屬性
接著在base > _text.scss中，來增添一個hyperlink的樣式
如此一來，可以把hyperlink這項樣式，很清楚的劃分在_text中 (對架構而言hyperlink是text上面的樣式改變)，也可以便捷的使用已定義的變數，不會造成色碼滿天飛的情況。
現在我們只需把hyperlink這個class加到想要改變的標籤上就可以了
再舉例一項主題樣式(theme)的範例：
首先，在theme資料夾中創建_penguin.scss的文件，將特有的主題樣式都寫在這之中
假設我們正在製作的專案叫做penguin，專案中常常會使用卡片(card) 來呈現資料，且卡片(card)中的內容與設計都是固定且是penguin專案中特有的
能有清楚結構、好維護的css一直都是前端很有挑戰的事情
以上是我在專案中常用的結構，如果大家也有更好的架構歡迎在討論區跟我討論
覺得實用的話麻煩留下您的掌聲
使我更有動力分享每一份專案的經驗～
