檔案結構

SCSS 檔案結構

basic.scss 是我們每個頁面的最為基本的 SCSS 檔案,每個頁面都必須讀入。但是可以在依照不同的情境頁面或者功能頁面在增加讀入不同的 SCSS 檔案。

basic.scss - import 基本的 SCSS。_reset.css - browser reset 用 CSS。_variable.scss - 設置變數。_mixin.scss - 放置 mixin 的,不會被 compile css 的部分。_tools.scss - 設定通用的元件。_base.scss - 放置產品/專案通用設定。_ap-layout.scss - 放大 layout 部分,天、地、基本 RWD。          module/ 用來放置表單,表格,按鈕...等,一些通用模組元件。  ├ _fields.scss  ├ _btn.scss  ├ _tool-tips.scss  ├ _table.scss  ├ _grid.scss  ├ _nav.scss  └ ...          pages/ 給需要特定的排版頁面使用。  ├ article.scss   ├ home.scss  ├ login.scss  └ ...

basic import

在 basic.scss 的檔案 import 順序。

// *************************************////   product name//   -> product 說明//// ************************************* // -------------------------------------//   Framework// ------------------------------------- @import “compass”; // -------------------------------------//   base// ------------------------------------- @import “reset”;@import “variables”;@import “mixin”;@import “base”; // -------------------------------------//   layout// ------------------------------------- @import “ap-layout”; // -------------------------------------//   module// ------------------------------------- @import “grid”;@import “fields”;@import “btn”;@import “tool-tips”;@import “table”;@import “nav”; // -------------------------------------//   Inbox// -------------------------------------

Inbox

與其他開發人員合作有時候會有點困難,這邊可以新增其他臨時的 CSS 樣式,可以使維護人員適當的新增以及覆寫樣式。