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 樣式，可以使維護人員適當的新增以及覆寫樣式。