回到結構這個話題上來，好嗎？通常我使用自稱為?7-1 模式的結構：7 個文件夾，1 個文件?；旧?，你需要將所有的部件放進 7 個不同的文件夾和一個位于根目錄的文件（通常命名為?main.scss）中——這個文件編譯時會引用所有文件夾而形成一個 CSS 樣式表。

• base/
• components/
• layout/
• pages/
• themes/
• utils/
• vendors/

當然還有它:

• main.scss

壁紙來源自?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

文件命名要遵循如上統(tǒng)一的命名規(guī)則：使用連字符界定。

BASE文件夾

base/文件夾存放項目中的模板文件。在這里，可以找到重置文件、排版規(guī)范文件或者一個樣式表（我通常命名為_base.scss）——定義一些 HTML 元素公認的標準樣式。

• _base.scss
• _reset.scss
• _typography.scss

LAYOUT文件夾

layout/?文件夾存放構建網站或者應用程序使用到的布局部分。該文件夾存放網站主體（頭部、尾部、導航欄、側邊欄…）的樣式表、柵格系統(tǒng)甚至是所有表單的 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?以實現(xiàn)需求。

• _home.scss
• _contact.scss

取決于各自的開發(fā)流程，這些文件可以使用你自己的前綴命名，避免在最終樣式表中與他人的樣式表發(fā)生合并。一切完全取決于你。

THEMES文件夾

在大型網站和應用程序中，往往有多種主題。雖有多種方式管理這些主題，但是我個人更喜歡把它們存放在?themes/?文件夾中。

• _theme.scss
• _admin.scss

這個文件夾與項目的具體實現(xiàn)有密切關系，并且在許多項目中是并不存在的。

UTILS文件夾

utils/?文件夾包含了整個項目中使用到的 Sass 輔助工具，這里存放著每一個全局變量、函數(shù)、混合宏和占位符。

該文件夾的經驗法則是，編譯后這里不應該輸出任何 CSS，單純的只是一些 Sass 輔助工具。

• _variables.scss
• _mixins.scss
• _functions.scss
• _placeholders.scss?(frequently named?_helpers.scss)

utils/?文件夾也會被稱為?helpers/,sass-helpers/?或者?sass-utils/，具體使用情況取決于個人喜好。

VENDORS文件夾

最后但并非最終的是，大多數(shù)的項目都有一個?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 規(guī)則。這是為了避免在原庫或者框架文件中進行二次編輯——顯然不是好方法。

入口文件

主文件（通常寫作?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?的 Ruby Sass 擴展程序，使在 Sass 的?@import?中,使其做為 glob 模式，就像這樣：@import "components/*"

話雖如此，卻不推薦它，因為它按照字母順序引入文件，這往往并不是想要的，特別是處理一個對源文件順序有所依賴的編程語言的時候。