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