寫過CSS的朋友都知道，
CSS並不像是其他程式語言
擁有類似變數、條件等方式來撰寫，
僅只能一行行來進行編輯，所以當今天有很多地方需要去做修正時，
就必須花很多時間逐行去修正，在維護與重製上就必須花更多的時間去調整。

所以開始就有人為CSS加入了這些功能，
因此也產生出『CSS預處理器(css preprocessor)』的語言，
除了Sass以外，還有Less與stylus等語言，

而他實踐的手法則是編輯Sass檔案，透過編譯後就還是會變成網頁看得懂的CSS檔，
所以並非是在HTML裡面載入Sass檔，仍然還在引入CSS檔案..
寫過CSS的朋友都知道，
CSS並不像是其他程式語言
擁有類似變數、條件等方式來撰寫，
僅只能一行行來進行編輯，所以當今天有很多地方需要去做修正時，
就必須花很多時間逐行去修正，在維護與重製上就必須花更多的時間去調整。

所以開始就有人為CSS加入了這些功能，
因此也產生出『CSS預處理器(css preprocessor)』的語言，
除了Sass以外，還有Less與stylus等語言，

而他實踐的手法則是編輯Sass檔案，透過編譯後就還是會變成網頁看得懂的CSS檔，
所以並非是在HTML裡面載入Sass檔，仍然還在引入CSS檔案，

當初我在猶豫要不要學SASS的時候，
其實這一點有讓我很感冒，
因為它比之前寫原生CSS的差異在於，
寫SASS時必須轉檔成CSS，
而且還必須等他編譯完才可看到結果感到很不方便。

直到後來會讓我想學習的動機在於，
看一些國際的網頁設計師在github分享的網頁樣式都時常會釋出SASS檔出來，
再者也看到國內的資深網頁設計師也發文介紹它的強大之處，
也由於現前css撰寫上遇到不少效率瓶頸，
才終於讓我想投入學習，
雖然陣痛期難免，
但熟悉以後開發效率真的快到個爆炸...
就像犀利人妻的經典台詞：『我再也回不去了』...冏

--

所以這一章節就先來介紹SASS、SCSS的寫法，
我們先來看一段CSS碼，

.menu{
  position: relative;
}
.menu li{
  float: left  
}
.menu a{
  display: block
}
.menu span{
  color: #fff
}
.menu i{
  background: url(dot-icon.png);
}

這一段CSS是一個很常見的列表式選單的設計，
在.menu的範圍內有其他的html tag需要設定，
這一段程式碼在寫純CSS時會遭遇到一些問題，

1.新增：每次都必須重新打一次.menu後才有辦法繼續寫一個樣式的設定，例如.menu a、.menu li
2.調整：程式碼寫完後，日後要修改/維護/複製時，.menu要改其它名稱就必須逐行去修改，極為不方便。
3.除錯：寫純css時，如果不小心恍神少了個「;」、「｛」、「｝」時，CSS爛掉或沒起效用通常都需要花額外的時間除錯。

上述三個問題，
假使習慣撰寫SASS後，都可大量減輕其負擔：
首先介紹SASS的語法

.menu
  position: relative
  li
    float: left
  a
    display: block
  span
    color: white
  i
    background: url(dot-icon.png)

可以看得出來這樣的語法極其精簡，
也去掉了分號與大括號，
讓你可以專注在撰寫CSS上，

撰寫SASS的繼承下一個class流程為就按Enter後，下一行推一個Tab，
所以如果我要.menu裡面又有一個.active要設定時，就必須這樣子寫：

.menu
  position: relative
  .active
    color: #000

日後如果你class有衝突，
就直接把最上頭的.menu改成.header，
這樣子編譯出來的css也會自動幫你進行修改。

因為it邦支援的高亮支援不太ok，
所以就錄製一段影片讓大家可以了解撰寫SASS的流程，
請用全螢幕+720p來瀏覽

1.我用sublime編輯器左右開兩個視窗，左邊放sass檔案，寫的過程會按ctrl+s儲存，儲存後右邊的css檔案會自動編譯更新css。
2.36秒我希望我的a連結是在li裡面，所以全選後用tab推進
3.1分24秒處的&字號則是繼承前面的class所用，打w300按tab會直接show出width:300是因為我裝了sublime的插件 emmet
4.1分34秒我全選後向左與向右推進是用了ctrl+[與ctrl+]熱鍵，藉此讓大家了解繼承的關係。
5.1分49秒則是Sass強大之處，以後不要一直複製貼上或改class需要同時改很多個地方，只要改一處其他也會更著變動。

PS：
當然使用這個東西時要注意一些細節，
冒號後一致要加個空白，再寫顏色，
另外在推進的時候要用Tab來推進，不能使用兩次空白，
但如果你是用sublime text 3編輯器來撰寫的話，
上述的問題也可解決，它會在你撰寫css時自動幫你在冒號後留空白。

有興趣的朋友也可以用http://codepen.io/的線上編輯器來玩看看