如何組織 Sass 檔案

一包完整的 sass 檔案

一、字級、顏色設為變數
二、常用樣式整理成 mixins
三、將可能會跨業的元件(按鈕、標題、圖片的 wrapper)，整理成 component
四、不太會重複、更大的原件，一個 class 可以解決，整理到 layouts
五、最後由一個 page 將剩下的樣式排版完成，並將上述一到四 import 進來

下圖錯字，是 main.css

有些網站規模不大，會將每一頁都壓成 main.css，但隨著網站變大，main.css 會變得太大，所以一開始每個 page 獨立打包成 css 檔案會比較好。

重構

建議一邊整理一邊開著 watch，確保整理過程中樣式沒有壞掉或大改變 => regression test 這種回測工具可以幫助我們比較前一版跟後一版樣式的差異，因為肉眼看可能會漏掉

一、先將重複的命名，用巢狀包好

二、將顏色與字級用變數抽出來，命名方式大體分兩類 : 第一類是功能導向、第二類是數值設計上命名，每一次抽取都要再次比對 render 出的結果是否正常

三、抽檔案，可以先將 main01.sass, main02.sass 先放到 page 下面，接著掃過 SASS 檔案看哪邊是重複，或未來會用到有可能重複的部分。像是把 button 特別抽出來列成一個 component。sass 習慣將要引入的檔案命名上加底下。將重複很多的地方額外開一個檔案，利用 mixins 的方式整理，例如水平對齊。

四、幾乎每頁都會有的樣式，例如 : footer / navBar，將他們放入 layout。

(不用急著全移，可以等到東西足夠多，再抽檔案移動。)

五、打包