此篇會用三個實戰範例來當作做 Sass 架構介紹的結尾。

閱讀此篇內容前，建議先閱讀過前兩篇 Sass 架構：

• 第 14 集：Bootstrap 客製化 Sass 原始碼架構
• 第 15 集：Bootstrap 客製化 Sass 7-1 Pattern

專案架構範例

接下來用三個實際範例來介紹常見的架構範例。

範例一：品牌網頁

依照 page 各自頁面撰寫彼此的樣式。

特性：

• 每一個頁面的 獨特性高。（例如滾動視差、內容介紹、不同的 hover 效果）

• 重複性低 沒辦法建立元件、通用類別。

適合作法：

• 將 page 各自樣式切分，使程式碼不會產生衝突的問題，且較容易閱讀。

all.scss
|-- layout
     |-- _header.scss
     |-- _footer.scss
|-- base
     |-- _base.scss
|-- helpers
     |-- _variables.scss
     |-- _utilities.scss
|-- page
     |-- _index.scss
     |-- _product.scss
     |-- _store.scss
     |-- _faq.scss

範例二：電商網站

透過元件化、通用類別化，來撰寫樣式。

特性：

• 頁面中的元件 重複性高。

適合作法：

• 將樣式元件化，透過已經設計好的元件，來組出一個頁面出來。

all.scss
|-- layout
     |-- _header.scss
     |-- _footer.scss
|-- helpers
     |-- _variables.scss
     |-- _utilities.scss
     |-- _base.scss
     |-- _util.scss
|-- components
     |-- _button.scss
     |-- _table.scss
     |-- _form.scss
     |-- _grid.scss
     |-- _menu.scss
|-- page
     |-- _index.scss

範例三：綜合體

這邊就不示範範架構範例了，直接分享常見的問題以及如何解決。

特性：

• 某幾頁 獨特性高
• 某幾頁 重複性高

常見問題分為三個方向來講：

Bootstrap 相關

Q：特別的文字大小、行高。

A：可以用 通用類別 解決的都用 通用類別 解決，_variables.scss、_utilities.scss 新增自定義變數。

Q：接續上個問題，可能會問如何知道能不能用通用類別解決？

A：參考原始碼 _variables.scss、_utilities.scss，在原始碼中搜尋要用的 語法關鍵字。

Q：覆蓋 Bootstrap 原本元件樣式，要單獨寫一支元件樣式，還是寫在有使用此元件的頁面樣式？

A：建議 單獨 拉出來寫（ex：_form.scss、_accordion.scss），哪怕只有一點點，拉出來至少後續 方便維護（ex：元件改版），能夠 快速 找到問題。

架構相關

Q：沒辦法分類的樣式怎麼處理？

A：通常無法分類的樣式我會移到 util.scss。

Q：刻意元件化！

A：若只有單一個頁面使用，則建議直接寫在此頁面的樣式中即可（ex：_product.scss），若不熟悉元件的朋友，可以先參考官方的元件。

Q：資料夾內只有一個檔案可以嗎？

A：先說在設計結構時最大的目的是 提升維護以及可讀性，所以大方向建議是 整體結構變少 → 每隻檔案樣式減少 → 檔案減少，而不是一昧的為了拆而拆導致整體不方便閱讀。

歸類語法相關

示範如何歸類：

• hover 效果
• 不同圖片大小

hover 效果

一支 *.scss 檔案專門處理 hover 效果樣式：

.translucent-hover:hover {
  opacity: 0.5;
}

.pink-hover:hover {
  background: $pink;
  color: $red;
}

.image-zoom-hover {
  transition: all 1s ease-out;
  &:hover {
    transition: all 0.5s cubic-bezier(.165, .84, .44, 1);
    transform: scale(1.2);
  }
}

不同圖片大小

一支 *.scss 檔案專門處理圖片樣式，會存放不同的大小。

.logo {
  width: 45px;
  height: 45px;
  display: block;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
.logo-primary {
  background: url(../images/photo-1612157879902-5382bc6e864b.jpeg) no-repeat center/cover;
}
.logo-white {
  background: url(../images/photo-1612157777902-5382bc79864b.jpeg) no-repeat center/cover;
}

.index-banner {
  background: url(../images/photo-1612157777902-5382bc6e864b.jpeg) no-repeat bottom/cover;
}

.head-shots-img-s {
  width: 48px;
  height: 48px;
}

.head-shots-img-m {
  width: 96px;
  height: 96px;
}