切完所有圖片後，
就可以開始規劃Sass檔案了，

當你今天新建立一個Sass專案時，
裡面預設會有print、ie、screen的Sass檔案，
第一次撰寫Sass的新手我是會建議全部刪掉，再依序建立Sass檔案，
建立的檔案與@import先後順序為：

@import compass
@import variable  //專門放變數
@import mixin  // mixin
@import reset  // reset 網頁用的css
@import extend // 合併CSS用，裡面都是使用%的符號來取代class的「.」符號。
@import index // 撰寫Sass 首頁樣式

由於目前我只切一頁首頁，
所以Sass這一次我只切割為一隻_index.sass，
但如果你是多頁Sass檔案時，
可以再細分有layout的共通框架、
或者依照各單元再切割Sass檔案，
這樣才會有助於你立即找到你想要改的Sass檔。

我自己用sublime編輯器，是較常用下面的熱鍵：

Ctrl+P //輸入關鍵字就可以開啟檔案，不用打得很完全他還是會幫你搜尋出來
Ctrl+w //關閉目前所在檔案
alt+數字鍵 // 檔案間切換

這樣當你要修改各Sass檔案時，
就可以透過熱鍵的幫助讓你很快地就能修改檔案，
相關操作流程可再瀏覽錄製的影片。

接下來我們就可以開始規劃全域的變數部份了，
像之前曾有講到關於比較常用的全域設定有下述幾種：

$text-color:pink→預設文字顏色
$link-color:#000→文字連結樣式，多則就再加紹數字
$link-color-hover:#fff→滑鼠拖曳過後的樣式顏色
$font-size:13px→全域字型大小，如一網站有多種就下多種字型
$line-height:1.8→全域行距
$container-width:960px→ 網站整體寬度
$font-style："Helvetica Nueue", Arial, Sans Serif; →全域字型

以我這次要切的版型中，我則先設定了三種全域樣式：
1.網站預設文字顏色： $text-color: #292929
2.熱門文字顏色： $hot-color: #01a5ca
3.網站整體寬度： $width:940px

你可能會想說為什麼我不一次到位，
把所有的全域設定都先設定好呢？
其實這個部分也會關係到你是什麼角色。

像以譬如來說我是前端工程師，
所以美術設計師在設計網站版型時，
通常都是一頁一頁給過來，
我再一頁頁切。

我會不曉得我所設定的東西是否在其他版型又有所變化，
所以通常有些東西真的比較常見我就會先設定，
但就不會一次都設定完，
以避免之後設計頁面一一給過來才發現又必須調整很多地方。

但如果你是美術設計師/網頁設計師，
你在設計畫面的同時，其實就可以開始考慮你的全域變數該怎麼設計了，
因為版型皆在你的掌控之下，就算其他版型不出來，你也可以先預設立場來設計。

當然也可以雙方溝通好後再設計變數，
也是沒問題的，全域變數設計完後，
預設文字顏色你就可以放在html或body的CSS來設定文字預設顏色樣式與變數。

明天我就會開始實際開發Sass與HTML內容，敬請期待嘍^_^
另附上影片開發流程：

延伸閱讀：
(03)如何透過「變數」提升撰寫CSS效率
http://ithelp.ithome.com.tw/question/10127206
(05)利用Sass「@import」進行CSS檔案模組切割
http://ithelp.ithome.com.tw/question/10127832
(10)如何建立自己的Sass Reset CSS：
http://ithelp.ithome.com.tw/question/10129547
(18)規劃你的Sass結構
http://ithelp.ithome.com.tw/question/10132821