管理Sass項目文件結構

http://www.w3cplus.com/preprocessor/architecture-sass-project.html

編輯推薦：?掘金是一個高質量的技術社區，從 CSS 到 Vue.js，性能優化到開源類庫，讓你不錯過前端開發的每一個技術干貨。?點擊鏈接查看最新前端內容，或到各大應用市場搜索「?掘金」下載APP，技術干貨盡在掌握中。

本文由大漠根據Hugo Giraudel的《Architecture for a Sass Project》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：http://www.sitepoint.com/architecture-sass-project。

——作者：Hugo Giraudel

——譯者：大漠

回想起來，我們以前做的事情主要是圍繞著CSS打轉。你是否還記得，你曾徹夜不眠的在努力寫CSS。Year!寫了上千行的代碼——通常是寫得不好——為了解決一些IE的bug，或者為了找到一個屬性值，我們不得不努力去尋找這樣的一個值。

我的小伙伴們，那些苦逼的日子就將過去了。CSS處理變得更有趣，也更復雜。現在我們有CSS預處理器、響應式設計、漸進增強、優雅降級，和其他一些時尚的東西。可以說，CSS變得比以往任何時候都更加強大。

CSS變得更有趣，更復雜。——@Hugo Giraudel

所以我們有很多東西需要處理，這樣一來，如何組織項目文件就變得非常的重要。我想大家都同意這樣的觀點，但實現起來并不太容易。所以我寫了這篇文章，將會告訴你應該怎么去想，比告訴你怎么做要更好，否則，我就離開你了。

構建你的結構體系

CSS預處理器的特點之一是可以把你的代碼分割成很多個文件，而且不會影響性能。這都要歸功于Sass的@import命令，只要在你的開發環境下，你調用不管多少文件，最終將編譯出一個CSS樣式文件。

多個文件中開發，最終合并輸出一個文件。——@Bruce Lee

開始將你的CSS文件分割成多個文件和文件夾。正如我的一位導師說的“任何事物都有其正確的地方，每個地方都有其正確的事”。那么，這也是我喜歡做的事。

文件夾構建

文件夾的創建是必不可少的。就算在家里，你也不會把所有的紙張放在一個盒子里。你可能會使用一個文件夾。一個用于房子上，一個用于銀行，一個用于賬單等等。

你在創建CSS的架構的時候也應該如此：你不只是把所有的Sass文件放在一個文件夾下，你會將他們分類。

下面的示例屏示的是我將如何組織我的Sass文件：

sass/ 
| 
|– base/ 
|   |– _reset.scss       # Reset/normalize 
|   |– _typography.scss  # Typography rules 
|   ...                  # Etc… 
| 
|– components/ 
|   |– _buttons.scss     # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– _navigation.scss # Navigation | ... # Etc… | |– helpers/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders helpers | ... # Etc… | |– layout/ | |– _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… | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– _jquery-ui.scss # jQuery UI | ... # Etc… | | `– main.scss # primary Sass file

正如你所看到的，在根目錄底下只有一個main.scss文件，其他.scss文件都根據不同的分類放在對應的文件夾中，只是這些.scss文件前面都有一個下劃線(_)，用來告訴Sass，這些.scss文件只是局部，不通過@import是不應該被編譯出.css文件。事實上，它們是導入和合并文件的基本文件而以。

一個文件可以解決所有問題，一個文件可以找到他們，一個文件給他們帶來了所有的一切，Sass只是將他們合并在一起。——@J.R.R. Tolkien

接下來，我們依次來看結構中的每一個文件目錄。

Base

base/文件夾包含了一些有關于你的項目中一些模板相關。在這里，你可以看到reset樣式(或者Normalize.css,或者其他)，也有一些關于文本排版方面的，當然根據不同的項目會有一些其他的文件。

_reset.scss或_normalize.scss
_typography.scss

Helpers

helpers/文件夾（有的地方也稱其為utils/）主要包含了項目中關于Sass的工具和幫助之類。在里面放置了我們需要使用的_function.scss，和_mixin.scss。在這里還包含了一個_variables.scss文件（有的地方也稱其為_config.scss），這里包含項目中所有的全局變量（比如排版本上的，配色方案等等）。

_variables.scss
_mixin.scss
_function.scss
_placeholders.scss(也有稱為_helpers.scss)

Layout

layout/文件夾(有時也稱為partials/)中放置了大量的文件，每個文件主要用于布局方面的，比如說"header"，“footer”等。他也會包括_grid.scss文件，用來創建網格系統。

_grid.scss
_header.scss
_footer.scss
_sidebar.scss
_forms.scss

導航文件（_navigation.scss）文件放在這里也有意義，雖然我將他放在了components/文件夾中。但是我想將其放在layout/文件夾中更好些，當然最后還是由你自己來決定。

Components

對于一些小組件，都放在了components/文件夾（通常也稱為modules/），layout/是一個宏觀的（定義全局的線框），components/是一個微觀的。它里面放了一些特定的組件，比如說slider，loading，widget或者其他的小組件。通常components/目錄下的都是一些小組件文件。

_media.scss
_carousel.scss
_thumbnails.scss

Themes

如果你像我一樣要為一個大型的網站制作多個主題，那么有一個theme/文件夾是非常有意義的。你可以把主題相關的文件放在這個文件夾中。這絕對跟具體的項目有關，你只要覺得跟主題相關的，有必要引入。

_theme.scss
_admin.scss

Vendors

最后一個但并非不重要，創建vendors/文件夾，主要用來包含來自外部的庫和框架的CSS文件。比如Bootstrap,jQueryUI，FancyCarouselSliderjQueryPowered等等。把這些文件放在同一個文件夾中，你可以說，嘿，這些代碼不是我的，不是我寫的，跟我無關。

例如：

bootstrap.scss
jquery-ui.scss
select2.scss

從另一個角度來說，在我平時工作中，還創建了一個vendors-extensions/文件夾，用來放置一些覆蓋從外部引入進來的庫和框架中的小組件。例如，我們可以在_bootstrap.scss文件中用來覆蓋Bootstrap框架中的一些小組件。這為了避免和外部直接引來的組件升級造成的沖突，或許這不是一個很好的方案。

大致就是這些，但不同的項目可能會不一樣，但我可以肯定，你們都有了這樣的一個概念。在文件夾中嵌套一個文件夾，這樣的做法我一直不太反對，但我不太喜歡這樣的方式。我發現，在大多數情況之下，只需一個層級就足足夠，既保證結構的簡潔與清晰，而且不復雜。但話又說回來，如果你覺得你的項目有必要嵌套更深層次的文件夾，你也可以自由的發揮。

溫馨提示：如果你覺得你的架構并不能向大家說明SCSS文件夾的架構，你可以在根目錄下創建一個README.md文件（或者在main.scss文件中一步一步說明）解釋。