回到結構這個話題上來，好嗎？通常我使用自稱為?**7-1 模式**的結構：7 個文件夾，1 個文件。基本上，你需要將所有的部件放進 7 個不同的文件夾和一個位于根目錄的文件（通常命名為?`main.scss`）中——這個文件編譯時會引用所有文件夾而形成一個 CSS 樣式表。 * `base/` * `components/` * `layout/` * `pages/` * `themes/` * `utils/` * `vendors/` 當然還有它: * `main.scss` 壁紙來源自?[Julien He](https://twitter.com/julien_he) 理想情況下，目錄層次如下所示： ~~~ sass/ | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | ... # Etc… | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | ... # Etc… | |– layout/ | |– _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 | ... # Etc… | |– utils/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc… | | `– main.scss # Main Sass file ~~~ 文件命名要遵循如上統一的命名規則：使用連字符界定。 ## BASE文件夾 `base/`文件夾存放項目中的模板文件。在這里，可以找到重置文件、排版規范文件或者一個樣式表（我通常命名為`_base.scss`）——定義一些 HTML 元素公認的標準樣式。 * `_base.scss` * `_reset.scss` * `_typography.scss` ## LAYOUT文件夾 `layout/`?文件夾存放構建網站或者應用程序使用到的布局部分。該文件夾存放網站主體（頭部、尾部、導航欄、側邊欄…）的樣式表、柵格系統甚至是所有表單的 CSS 樣式。 * `_grid.scss` * `_header.scss` * `_footer.scss` * `_sidebar.scss` * `_forms.scss` * `_navigation.scss` `layout/`?文件夾也會被稱為?`partials/`, 具體使用情況取決于個人喜好。 ## COMPONENTS文件夾 對于小型組件來說，有一個?`components/`?文件夾來存放。相對于?`layout/`?的_宏觀_（定義全局線框結構），`components/`?更專注于局部組件。該文件夾包含各類具體模塊，基本上是所有的獨立模塊，比如一個滑塊、一個加載塊、一個部件……由于整個網站或應用程序主要由微型模塊構成，`components/`?中往往有大量文件。 * `_media.scss` * `_carousel.scss` * `_thumbnails.scss` `components/`?文件夾也會被稱為?`modules/`, 具體使用情況取決于個人喜好。 ## PAGES文件夾 如果頁面有特定的樣式，最好將該樣式文件放進?`pages/`?文件夾并用頁面名字。例如，主頁通常具有獨特的樣式，因此可以在?`pages/`?下包含一個?`_home.scss`?以實現需求。 * `_home.scss` * `_contact.scss` 取決于各自的開發流程，這些文件可以使用你自己的前綴命名，避免在最終樣式表中與他人的樣式表發生合并。一切完全取決于你。 ## THEMES文件夾 在大型網站和應用程序中，往往有多種主題。雖有多種方式管理這些主題，但是我個人更喜歡把它們存放在?`themes/`?文件夾中。 * `_theme.scss` * `_admin.scss` 這個文件夾與項目的具體實現有密切關系，并且在許多項目中是并不存在的。 ## UTILS文件夾 `utils/`?文件夾包含了整個項目中使用到的 Sass 輔助工具，這里存放著每一個全局變量、函數、混合宏和占位符。 該文件夾的經驗法則是，編譯后這里不應該輸出任何 CSS，單純的只是一些 Sass 輔助工具。 * `_variables.scss` * `_mixins.scss` * `_functions.scss` * `_placeholders.scss`?(frequently named?`_helpers.scss`) `utils/`?文件夾也會被稱為?`helpers/`,`sass-helpers/`?或者?`sass-utils/`，具體使用情況取決于個人喜好。 ## VENDORS文件夾 最后但并非最終的是，大多數的項目都有一個?`vendors/`?文件夾，用來存放所有外部庫和框架（Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered……）的 CSS 文件。將這些文件放在同一個文件中是一個很好的說明方式:”嘿，這些不是我的代碼，無關我的責任。” * `_normalize.scss` * `_bootstrap.scss` * `_jquery-ui.scss` * `_select2.scss` 如果你重寫了任何庫或框架的部分，建議設置第 8 個文件夾?`vendors-extensions/`?來存放，并使用相同的名字命名。 例如，`vendors-extensions/_boostrap.scss`?文件存放所有重寫 Bootstrap 默認 CSS 之后的 CSS 規則。這是為了避免在原庫或者框架文件中進行二次編輯——顯然不是好方法。 ## 入口文件 主文件（通常寫作?`main.scss`）應該是整個代碼庫中唯一開頭不用下劃線命名的 Sass 文件。除?`@import`?和注釋外，該文件不應該包含任何其他代碼。 文件應該按照存在的位置順序依次被引用進來： 1. `vendors/` 2. `utils/` 3. `base/` 4. `layout/` 5. `components/` 6. `pages/` 7. `themes/` 為了保持可讀性，主文件應遵守如下準則： * 每個?`@import`引用一個文件； * 每個?`@import`單獨一行； * 從相同文件夾中引入的文件之間不用空行； * 從不同文件夾中引入的文件之間用空行分隔； * 忽略文件擴展名和下劃線前綴。 ~~~ @import 'vendors/bootstrap'; @import 'vendors/jquery-ui'; @import 'utils/variables'; @import 'utils/functions'; @import 'utils/mixins'; @import 'utils/placeholders'; @import 'base/reset'; @import 'base/typography'; @import 'layout/navigation'; @import 'layout/grid'; @import 'layout/header'; @import 'layout/footer'; @import 'layout/sidebar'; @import 'layout/forms'; @import 'components/buttons'; @import 'components/carousel'; @import 'components/cover'; @import 'components/dropdown'; @import 'pages/home'; @import 'pages/contact'; @import 'themes/theme'; @import 'themes/admin'; ~~~ 這里還有另一種引入的有效方式。令人高興的是，它使文件更具有可讀性；令人沮喪的是，更新時會有些麻煩。不管怎么說，由你決定哪一個最好，這沒有任何問題。 對于這種方式，主要文件應遵守如下準則： * 每個文件夾只使用一個`@import` * 每個`@import`之后都斷行 * 每個文件占一行 * 新的文件跟在最后的文件夾后面 * 文件擴展名都可以省略 ~~~ @import 'vendors/bootstrap', 'vendors/jquery-ui'; @import 'utils/variables', 'utils/functions', 'utils/mixins', 'utils/placeholders'; @import 'base/reset', 'base/typography'; @import 'layout/navigation', 'layout/grid', 'layout/header', 'layout/footer', 'layout/sidebar', 'layout/forms'; @import 'components/buttons', 'components/carousel', 'components/cover', 'components/dropdown'; @import 'pages/home', 'pages/contact'; @import 'themes/theme', 'themes/admin'; ~~~ 為了不用親自引入每一個文件，有一個叫做?[sass-globbing](https://github.com/chriseppstein/sass-globbing)?的 Ruby Sass 擴展程序，使在 Sass 的?`@import`?中,使其做為 glob 模式，就像這樣：`@import "components/*"` 話雖如此，卻不推薦它，因為它按照字母順序引入文件，這往往并不是想要的，特別是處理一個對源文件順序有所依賴的編程語言的時候。