在開發數個網站後，
網頁設計師通常都會思考該如何化繁為簡地設計自己的開發流程，
今天則就提供一些心法讓剛碰觸Sass的朋友了解該如何整合自己的Sass資料，
範例檔就拿前四天我所設計的demo網站流程來示範：

1.設計開發專用的資料夾
通常在設計網頁時，
你自然會發現有一些網頁設計流程都是每次時常在做的，
像這種重工的工作內容，
你就可以思考該如何減少這樣的情況，
像每個網頁都一定會有固定的資料夾與程式檔，
例如一定會有：
1.index.html
2.images資料夾
3.CSS資料夾

所以在做網站時，通常我都會做一個乾淨的版本，
當我要做新專案時，就拿那一份複製貼上，
自然我就節省掉很多開新資料夾與檔案的時間。

那像Sass資料夾，我們就可以一一來審視有哪些Sass我們是可以保留起來，
做為下次開發而用，所以我們就以前幾天所做的Demo網站來看，
如果你沒下載下來的話，可以瀏覽我放在Github檔案，點進去就可以看到各程式碼：
https://github.com/gonsakon/Sass-Layout-Demo/tree/master/sass

Sass架構：
Defaule.sass
└_variable.sass
└_mixin.sass
└_reset.sass
└_extend.sass
└_index.sass

1.default.sass
這個資料夾主要是拿來合併所有的Sass檔案，
同時也是做為HTML要載入CSS的檔案(default.css)，
所以當然必須留著。

2._variable.sass

$text-color: #292929
$hot-color: #01a5ca
$width:940px
$line-height: 1.8
$border-color: #F4F4F4

在網頁設計中，
設計全域文字顏色與熱門顏色是一定會有的，
另外網站寬度與行距也ok，
但線條顏色可能就不太會出現，
所以保留前四個起來即可。

3._mixin.sass

@mixin bg($img)   
  background: url("../images/#{$img}")  
  width: image-width("../images/#{$img}")  
  height: image-height("../images/#{$img}")  

做網站時，時常會要計算圖片寬高與背景圖案，
所以這個自然也留著

4._reset.sass
reset自然不用說一定要留著的了。

5._extend.sass

%clearfix
  &:before
    content: ""
    display: table
  &:after
    content: ""
    display: table
    clear: both
  zoom: 1

為了要合併清除浮動的class，
這個自然也是必要的，
所以也留著。

6._index.sass
想當然爾，
裡面所設計的東西都是屬於這個網站內容，
所以全部刪掉。

經由上述的觀察，
你就可以整理出一個乾淨的Sass資料夾，
將他複製出來後，等到下次網站開發就可以高高興興地使用了。
當然當你的網頁技術更加精湛後，
你自然就會逐步擴增你的Sass結構了，
如同我第十八天所分享的部分：http://ithelp.ithome.com.tw/question/10132821

另也附上整理乾淨版本的流程影片：

2.思考Sass的設計應用
在做網站的過程中，
其實也是在省思有哪些流程太過繁複，
再利用Sass功能來進行簡化，例如：
a.顏色色碼都盡量變數化
b.如果設計效果上有多重選擇，便可結合if()+@mixin來設計
c.當一塊模組元素要移動到其他頁面元素上時，思考如何用@extend合併相同樣式
d.為了要讓自己快速找到目標程式碼，Sass檔案該分割得多細才容易找到，像譬如表頭的_header.sass又可切割為header資料夾裡面又有_logo.sass、_topbar.sass等等。利用sublime強大搜尋功能也可快速尋找到檔案。所以也有網頁設計師建議，一個Sass檔案不宜放2~300行以上程式碼，這樣便失去Sass程式碼分割化的優點。

從上述的種種例子可以看出，
Sass的設計思維比起以往寫傳統CSS又更加廣泛了些，
希望透過上面第一點的實際操作流程，
讓大家了解該如何逐步整合自己的Sass檔。