在上回我們曾經提到過@import的用法，
它的功用在於可以將CSS檔案進行切割，
如果是單純要被匯入整合Sass檔，
而並沒有要轉出成CSS檔案的話，
那就在檔案名稱前面加個下底線『_』，例：_button.css，

所以通常只有一個要編譯成CSS，
而這個檔案就會有一堆@import，
編譯出來的CSS檔案就會依照@import的前後排列來依序產生CSS碼。
這裡就來提供一些組織的心法給各位：
首先先來一個基本的設計：

@import mixin //放置所有Sass全域變數與Mixin
@import reset // reset.css
@import extnd // 拿來合併樣式，都放@extend用的檔案
@import layout //共同框架
@import index //首頁
@import page //內頁 
@import xxx  //各單元CSS

基本上來說，
@import最前面的檔案裏面一定都會先放全域變數與mix，
如果你把 _mixin.sass放在最下面，
那就一定會出錯，
原因自然是因為前面@import有寫到變數的地方找不到值，
所以自然系統沒辦法編譯出來。

再來自然就是放reset檔案，
網頁排版自然必須先將所有瀏覽器預設樣式都統一，
這樣設計出來才不會有問題，
你或許會疑惑說，
那應該是reset放在最上面啊，
為何是Mixin放在最上面呢?？
由於第一個檔案都是mixin與變數，
所以是不會產生出任何的code，
再加上有些網頁設計師的習慣，
也會在reset裡面設計導入全域變數，

〔@extend與@mixin並不會實際產生code，只有你去呼叫他才會合併與匯出〕

第三個extend的話則是拿來合併css樣式用的，
通常我們在設計網頁時，
才會發現有些樣式應該可以抽出來進行合併動作，
所以就會統一放在要合併的位置，
所以裡面就統一來放置@extend的語法。

layout則是網頁版型的共通設計，
也就是不管到哪一樣都會有的樣式，
例如：表頭、表尾
再來就index首頁、page內頁，再來就看你的單元數量視情況來切割，
Sass import的用意最主要就是希望你可以把CSS進行切割，
這樣在編輯CSS時就可以聚焦於某功能來進行瀏覽，
將檔案歸類完善，找CSS相對也會方便許多。

另外我們也來看看國外的Sass Way所介紹的Sass結構：

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

你可以看得出來，
這個設計者規劃得Sass還有分資料夾，
將各類功能與模組分得更細，
modules主要是放各種元素的模組，
partials則是放置主結構的CSS，
vendor則是統一放別人寫好的Sass Framework，
所以他的Sass檔案就會這樣子去寫@import，

// Modules and Variables
@import "partials/base";
// Partials
@import "partials/reset";
@import "partials/typography";
@import "partials/buttons";
@import "partials/figures";
@import "partials/grids";
// ...
// Third-party
@import "vendor/colorpicker";
@import "vendor/jquery.ui.core";

一樣也是最上面放mixin，
再來就是reset與layout。

如果你對Sass才剛入門，
建議你採第一種來切割即可，
至多就是多一個vendor資料夾放你要使用的Sass framework。

於此也提供設計流程影片，
提供大家參考與學習^_^：