(4)什麼是Sass 7-1架構?

在本主題的第2篇文章有提到，一開始使用Sass/SCSS，建議可以將內容拆分成好幾個檔案，類似以下結構 :

@import "variable";// 變數  
@import "reset";  // reset.css  
@import "layout"; // 共同框架,第一層
@import "index"; //首頁    
@import "faq";   //分頁
@import "cart";  //分頁

🙋‍♀️若是大專案，想要使用更全面的檔案拆分結構，有什麼參考依據呢 ?

此時就可以參考官方提供的 Sass7-1 架構

Sass7-1架構

( 參考資料來源 : 官方範例 )

Sass 7-1架構將檔案分成7個資料夾加上1個主要的main.scss檔案，

範例結構如下 :

- 📂7 個資料夾 -

1. base/
2. components/
3. layout/
4. pages/
5. themes/
6. abstracts/
7. vendors/

- 📄1個主要檔案 -

• main.scss

7 個資料夾分別放置哪些內容 ?

• 📂 base/
  放置一些基本樣板設定(boilerplate code)，如css reset、全站網站設定，或一些原本會寫在body的基本內文文字設定。
• 📂 components/ (亦可命名為 modules/)
  放置一些常用的元件樣式，例如按鈕、輪播、選單。
• 📂 layout/ (亦可命名為 partials/)
  放置網頁layout對應的樣式設定內容。
  甚麼是網頁的layout呢?可以想成每個分頁都會重複出現的區塊，例如header、footer、navigation、sidebar...
• 📂 pages/
  放置主頁及分頁對應的樣式設定內容。
  檔名最好與其對應分頁名稱相同，例如cart.html對應的scss就命名為_cart.scss 。
• 📂 themes/
  放置網頁中不同樣式主題設定 ( 較少使用到 )
• 📂 abstracts/ (亦可命名為 utilities/ 或是 helpers/)
  放置在此資料夾的檔案內容不應輸出成CSS，他們應是用來匯入其他scss檔案中的工具如變數、計算公式。
• 📂 vendors/
  放置一些外部載入的程式碼、套件、框架、函式庫。
  例如 Bootstrap、jQuery、輪播套件效果 等不是我們自己寫的程式內容。

如果希望改寫 vendors 這些外部載入的預設程式碼，建議可以多新增第 8 個資料夾 vendors-extensions /

• 📂vendors-extensions/
  可將要覆蓋原始程式碼的檔案內容放置在這裏面，而不是直接在外部載入的程式碼上做改寫。
  例如我們想要改寫Bootstrap的預設樣式，可以在 vendors/ 資料夾裡先載入原始的 _bootstrap.scss ，然後再另設一個 vendors-extensions/ 資料夾新增一個_bootstrap.scss來覆蓋預設樣式的程式碼。

7個資料夾的檔案分類放置，可參考以下官方提供的範例 :

主要檔案main.scss裡會放置什麼內容?

📄main.scss的功能是用來匯入我們剛剛在各個資料夾中建立的檔案內容，所以它的內容只會有以@import開頭的SCSS語法，不會有其他撰寫樣式的語法 !

⚠️需特別注意的是 main.scss 的檔名前面不會加上下底線，因為它是我們希望最後編譯出CSS的主要檔案。

⚠️而其他放在7個資料夾中的檔案，是我們用來匯入到main.scss的SCSS檔案，我們並不希望它被單獨編譯成一個個CSS檔，所以在檔名前面，須加上下底線 ! 如_header.scss、_variables.scss、_mixins.scss。

看完了以上Sass7–1架構介紹，是否對SCSS檔案拆分多一點頭緒了呢?

如果還需要更多的分類靈感，

也可以參考看看 Bootstrap 在Github文件的檔案是怎麼去做分類的哦~