Sass 學習雜記 - Part 8. 開發架構與檔案切割

Part 8. 開發架構

在前面幾篇的分享中，針對 Sass/SCSS 的觀念與運算作介紹。然而，Sass 除了能大幅縮減過去 CSS 的撰寫篇幅，但是若不能有良好的架構，則會顯得十分糟糕，因此本章將針對 Sass/SCSS 開發上的架構進行說明。

8.1 規劃架構

• 對於一個良好的網站開發，前端的架構十分重要，尤其是龐大且複雜的網頁更是如此，因此我們將從架構面開始着手。以下是簡單的網頁架構，方便日後其他專案的開發，可以直結複製使用。

    project
    │   index.html
    └───img
    └───js
    └───css
    └───sass
  

• 以下案例是一個架構良好的 Sass 檔案，值得注意的是，此架構對針對每一個元件以及對應的變數與函式的檔案位置配置。
• 對於初學者而言，可以試著試著在 sass/ 的資料夾下分別建立以下檔案。

    └───sass
    │   │   defaule.sass
    │   │   _variable.sass
    │   │   _mixin.sass
    │   │   _reset.sass
    │   │   _extend.sass
    │   │   _index.sass
  

  1. default.sass：主要用來合併所有的 Sass 檔案，同時也是做為 HTML 要載入的 CSS 檔案 (default.css)。
  2. _variable.sass：設定網站設計時用到的全域變數。
  3. _mixin.sass：存放所有 Mixin 的撰寫，如：背景圖片、高度與寬度等。
  4. _reset.sass：作為 Reset CSS 使用。
  5. _extend.sass：為了要合併清除浮動的 class。
  6. _index.sass：主要設計的部分。

8.2 檔案引入與切割

對於開發大型專案，我們一般會將其中的各個元件分別完成，最後在逐一整併。如此不但對於日後維護更佳容易，也更適合擴大專案規模。

8.2.1 檔案引入

• Sass 中延續 CSS 的 @import 功能，允許引入外部的 SCSS 或是 Sass 檔案。
  • 一般而言，所有引入的 SCSS 檔案都將引入到主要的 SCSS 檔案中，再由此主要的 SCSS 檔案編譯成 一份 CSS 檔案 。
  • 主要的 SCSS 檔案中可以存取定義在其他檔案中的任一個變數 (Variables) 或組合 (Mixins)
  • @import 指令透過 檔案名稱 作爲外部檔案的引入。
• 檔案引入除了對於架構的組織上更有邏輯，也能減少反覆撰寫相同的程式。

8.2.2 檔案切割

• Sass/SCSS 提供以 Partials 的方式將檔案引入，而所謂的 Partials 其實就是我們將檔案分割成各個部分，並組織成各個獨立的功能。
• 在 Sass/SCSS 中，以符號 _ 作爲這些 Partials 的檔案名稱中的前綴符號。

    _filename.scss
  

• 當要引入這些 Partials 或是要將其封裝成一個模組時，可以省略檔名中的 _ 直接列出檔名即可。以下範例爲引入檔名爲 _test.scss。

    @import "test";
  

• 在 Sass/SCSS 編譯的過程中，會按照 @import 的先後順序編譯來產生 CSS 程式碼，下方以基本架構為例：

    @import mixin;
    @import reset;
    @import extnd;
    @import layout;
    @import index;
    @import page;
    @import xxx;
  

  • mixin - Sass 全域變數與所有 Mixin，編譯後不會產生這份的程式碼。
  • reset - 使用 reset.css 讓所有瀏覽器的預設樣式統一。理論上來說，應該是要先引入 reset 再來才是 mixin，但是通常會在 reset.css 中的引入全域變數，所以還是先 mixin 再來才是 reset。
  • extend - 用來合併樣式，編譯後不會產生這份的程式碼 (請參考：Sass 學習雜記 - Part 9. 合併樣式)。
  • layout - 網頁版型的共同框架。
  • index - 首頁。
  • page - 其他內頁。
  • xxx - 其他各單元的 CSS、Sass/SCSS 檔案等。
• 案例：Sass/SCSS 檔案架構觀摩 以下案例是 The Sass Way 網站所介紹的檔案架構。這種架構下分得更仔細，在 sass/ 資料夾下還有資料夾，將各類功能與模組分開，其中 modules/ 放置各種元素的模組，partials/ 放置主要結構的 CSS，vendor/ 則統一放置別人寫好 (外部) 的 Sass Framework。

    stylesheets/
    |
    |-- modules/              # Common modules
    |   |-- _all.scss         # Include to get all modules
    |   |-- _utility.scss     # Module name
    |   |-- _colors.scss      # Etc...
    |   ...
    |
    |-- partials/             # Partials
    |   |-- _base.sass        # imports for all mixins + global project variables
    |   |-- _buttons.scss     # buttons
    |   |-- _figures.scss     # figures
    |   |-- _grids.scss       # grids
    |   |-- _typography.scss  # typography
    |   |-- _reset.scss       # reset
    |   ...
    |
    |-- vendor/               # CSS or Sass from other projects
    |   |-- _colorpicker.scss
    |   |-- _jquery.ui.core.scss
    |   ...
    |
    `-- main.scss            # primary Sass file
  

  所以在這種框架下，Sass/SCSS 檔案中的 @import 寫法如下：

    /* Modules and Variables */
    @import "partials/base";
  
    /* Partials */
    @import "partials/reset";
    @import "partials/typography";
    @import "partials/buttons";
    @import "partials/figures";
    @import "partials/grids";
  
    /* Third-party Framework */
    @import "vendor/colorpicker";
    @import "vendor/jquery.ui.core";
  

  對於初學者而言，建議使用上述提及的基本架構，最多再新增一個 vendor/ 資料夾來存放外部的 Sass Framework。

References

• Sass Import Directives - TutorialPoints
• Sass/SCSS 簡明入門教學
• SCSS 15分鐘入門
• Codecademy - Learn Sass

【Sass 學習雜記】系列

• Sass 學習雜記 - Part 1. 簡介
• Sass 學習雜記 - Part 2. 變數表示
• Sass 學習雜記 - Part 3. 巢狀表示
• Sass 學習雜記 - Part 4. 組合表示
• Sass 學習雜記 - Part 5. 函式與運算
• Sass 學習雜記 - Part 6. 條件與迴圈
• Sass 學習雜記 - Part 7. 常見的編譯錯誤
• Sass 學習雜記 - Part 8. 開發架構與檔案切割
• Sass 學習雜記 - Part 9. 合併樣式
• Sass 學習雜記 - A1. 數學函式
• Sass 學習雜記 - A2. 顏色函式
• Sass 學習雜記 - A3. 字串函式

如果你有任何建議與指教，歡迎於下方留言一起討論喔！