5. 擴展/繼承(Extend/Inheritance)

   我們可以定義一組樣式，然後將這些樣式應用於不同的元素，同時保持代碼的整潔和可維護性。

   使用@extend指令可以實現擴展/繼承的功能。首先，我們定義一個樣式區塊，然後在需要應用這些樣式的元素上使用指令。例如：

   // 定義一個樣式區塊
   .btn {
     background-color: blue;
     color: white;
     padding: 10px 20px;
   }
   
   // 在需要的地方應用這個樣式
   .submit-btn {
     @extend .btn;
   }
   
   .cancel-btn {
     @extend .btn;
     background-color: red; // 可以覆蓋父樣式的屬性
   }
   
   

   上面的例子中，我們定義了一個通用的.btn樣式，然後在.submit-btn和.cancel-btn中應用了這個樣式。這樣可以減少代碼重複，提高代碼的可讀性。

6. Partials

   是以_開頭的文件，通常包含一組樣式定義，並且可以在其他SCSS文件中引用。通過這種方式，我們可以將代碼模塊化，使程式碼更易於維護。

   要創建一個Partial，只需將文件命名為以_開頭的名稱，然後在需要使用它的文件中引入。例如，我們建一個名為_variables.scss的Partial，其中包含一些變數定義：

   // _variables.scss
   
   $primary-color: blue;
   $secondary-color: green;
   
   

   然後，在另一個SCSS文件中引入這個Partial：

   // main.scss
   
   @import "variables"; // 引入_variables.scss
   
   body {
     background-color: $primary-color;
   }
   
   

7. Sass Pattern

   從以上partials可以預想到，我們的專案應該會有許多個partials，那麼要如何拆分和管理這些模組呢? 資料夾結構大概會長這樣：

   //參考來源：https://gist.github.com/rveitch/84cea9650092119527bc
   sass/
   |
   |– base/
   |   |– _reset.scss       # Reset/normalize
   |   |– _typography.scss  # Typography rules
   |   ...                  # Etc…
   |
   |– components/
   |   |– _buttons.scss     # Buttons
   |   |– _carousel.scss    # Carousel
   |   |– _cover.scss       # Cover
   |   |– _dropdown.scss    # Dropdown
   |   ...                  # Etc…
   |
   |– layout/
   |   |– _navigation.scss  # Navigation
   |   |– _grid.scss        # Grid system
   |   |– _header.scss      # Header
   |   |– _footer.scss      # Footer
   |   |– _sidebar.scss     # Sidebar
   |   |– _forms.scss       # Forms
   |   ...                  # Etc…
   |
   |– pages/
   |   |– _home.scss        # Home specific styles
   |   |– _contact.scss     # Contact specific styles
   |   ...                  # Etc…
   |
   |– themes/
   |   |– _theme.scss       # Default theme
   |   |– _admin.scss       # Admin theme
   |   ...                  # Etc…
   |
   |– utils/
   |   |– _variables.scss   # Sass Variables
   |   |– _functions.scss   # Sass Functions
   |   |– _mixins.scss      # Sass Mixins
   |   |– _helpers.scss     # Class & placeholders helpers
   |
   |– vendors/
   |   |– _bootstrap.scss   # Bootstrap
   |   |– _jquery-ui.scss   # jQuery UI
   |   ...                  # Etc…
   |
   |
   `– main.scss             # Main Sass file
   

   檔案命名規則

   命名的原則就是要讓其他人也能清楚知道檔案是指什麼，比起一開始我們學習時習慣根據元件、區塊功能來命名，例如：goods、news、buyButton等，以header.scss、buttons.scss等來命名會更易讀(未來在回顧自己寫了什麼也會更容易了解)。

   資料夾分類規則

   在pattern中，分成了一支主要檔案和七個資料夾(base、components、layout、pages、themes、utils、vendors)。

   base裡放適用於專案整體的設定，像是reset和字型；components放一些元件，像是按鈕、下拉選項等；pages就是根據頁面的各部分來切割癌設定個部分的樣式；themes比較少會用到；utils放如變數、函數、mixin等我們這兩篇介紹到的Sass功能；vendors就放些套件框架的樣式，如Bootstrap和jQuery。

   創建一個主要的.scss：編譯一個文件就好

   我們在main.scss中引入partials，引入方式如下：

   @import "variables";
   @import "base";
   @import "layout";
   @import "components";
   @import "home";
   @import "responsive";
   

   我們只要編譯main.scss就好，所以在html中只要引入<link rel="stylesheet" href="/styles/main.css" />。

參考資料：

1. Sass:Sass Basics：https://sass-lang.com/guide/
2. 淺談 CSS 設計模式系列-Sass 7-1 Pattern 篇：https://israynotarray.com/css/20200523/116058774/
3. Sass-7-1-pattern：https://gist.github.com/rveitch/84cea9650092119527bc