如何管理多個sass項目，有沒有一些高效的開發流程？

01-08

下面是Sass Guidelines中的內容（Sass Guidelines中文版本）

通常使用7-1模式的結構：7個文件夾，1個文件。基本上，你需要將所有的部件放進7個不同的文件夾和一個位於根目錄的文件（通常命名為 main.scss）中——這個文件編譯時會引用所有文件夾而形成一個CSS樣式表。

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 (通常命名為_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文件

主文件（通常寫作main.scss）應該是整個代碼庫中唯一開頭不用下劃線命名的Sass文件。除 @import和注釋外，該文件不應該包含任何其他代碼。

文件應該按照存在的位置順序依次被引用進來：

vendors/
utils/
base/
layout/
components/
pages/
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";

也有很多人建議配合SMACSS（Home - Scalable and Modular Architecture for CSS）。大家還可以參考一下Foundation和Bootstrap這樣的大型前端框架子有關於Sass的文件管理。借別人之力，總結出一套適合自己或自己團隊的文件管理結構。

下面摘自了一些相關介紹管理Sass文件的文章，感興趣的話可以看看：

1、Sass帶來的變革

2、管理Sass項目文件結構

3、【Sass初級】如何組織一個Sass項目

4、將你的CSS項目轉換成Sass

5、Sass Guidelines中文版本之四：項目文件管理

有關於Sass更多的中文資料：sass | 博客自由標籤

有關於Sass的外文資料：FE-Translation/Sass · GitHub 順便說一下，我們也在致力於將這些外文教程翻譯成中文，希望有更多的同學參與到這樣的分享活動當中。