SASS目錄架構&Guide

[lienweb]

閱讀Index

• 撰寫SASS原則
• 開發架構及目錄規劃
• 參考資料

---

撰寫SASS原則

• 一行只有一個選擇器
• 先列出可繼承的 @extend
• 列出可 @include
• 巢狀結構只用於pseudo element & pseudo class
• 最多只做三層巢狀結構
• 單個巢狀結構不超過50行
• 開發時compile with source map方便查找問題
• production時檔案須壓縮
• main.css檔不做git版控
• 使用變數時機: 數字、顏色

開發架構guideline

寫CSS時，可能已經知道一開始可以按照reset css、撰寫共用樣式、撰寫custom樣式的方式去簡易分類，但如果專案規模變大，怎麼做才能更好的管理CSS檔案呢?
首先可以拆分檔案，此時會有個疑問，要怎麼分類比較好呢?

• 遵循 7- 1 架構原則
  所謂的7-1原則就是分成7個目錄+1個最終檔案
  基本上，會按照元件、功能、特性將SCSS檔案拆分並分別放置在7個目錄下，而最終檔案只負責import這些拆分後的檔案
  • base/
  • components/
  • layout/
  • pages/
  • themes/
  • abstracts/
  • vendors/
  • main.scss

而這些目錄分別會放置那些內容?

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   |– _base.scss  # 撰寫tag共用樣式、global var
|   |– _root.scss  # 共用變數: 顏色、框線、尺寸
|   ...   # Etc…
|
|– components/    # also name as "modules/"，放置常用元件樣式
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...   # Etc…
|
|– layout/  # also name as "partials/"、網頁佈局
|   |– _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
|   |– _dark.scss       # Dark theme
|   ... # Etc…
|
|– utils/     # also name as "helpers/ or abstracts/"，此目錄內容不應compile成獨立CSS檔
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins or 計算公式
|   |– _helpers.scss     # Class & placeholders helpers
|   |– _placeholders.scss     # Class & placeholders helpers
|
|– vendors/  #放外部載入的套件、框架、library
|   |– _normalize.scss   # Bootstrap
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ... # Etc…
| 
|– vendors-extensions/  #only exist if wish to override 外部套件
|   |– _bootstrap.scss   # Bootstrap override
|   ... # Etc…
|
|
`– main.scss             # Main Sass file

分類方法可依照專案需求客製化，而放在7個目錄下的檔案，通常production不會希望他們compile後也生成各自的css檔，因此會在檔名前加上前綴字下底線區分，如_header.scss。而main.scss則是最終我們希望被處理的檔案，因此檔名不會加上下底線

---

參考資料

• sitepoint: architect for a sass project
• SASS Guidelines
• SASS boilerplate github
• css tricks: SASS style guide
• 卡斯柏: merge bootstrap與自己開發元件的架構設計