寫過CSS的各位都知道，他是透過一行行來編輯，當有很多地方要做修正時就必須花很多時間檢查，解決方案就是使用前置處理器LESS或是SASS。
SASS是什麼？
真的會提升寫網頁的效率？
學習門檻高？
SASS有哪些是CSS無法取代？
如果有以上疑問，我們可以初步來探討一下這兩者的差異性

1.SASS是有結構的CSS，有程式邏輯概念和格式整理的CSS；可以解決當CSS越寫越多時，找CODE的不便。
2.可以有效將CSS模組化的方法，方便日後開發再利用；增加開發效率。
3.當使用共通樣式或者合併class的時候；減少重複打攏長無意義的class名稱或是子元素名稱，且較容易找尋。
4.用CSS3製作特效越來越普及，但太多瀏覽器前綴詞，導致使用上的不便利。
5.可使用繼承方式來進行樣式繼承；多人開發時更容易交接閱讀CSS樣式間的關聯性。
例如：以往的CSS寫法

.nav{
  position: relative;
}
.nav li{
  float: left;
}
.nav .btn{
  color: #000;
}

SASS寫法

.nav
  position: relative
  li
  float: left
  .btn
    color: #000

可以發現到結構階層更清楚明瞭，包含另個class .btn的繼承關係都歸屬到.nav底下，剛開始可能會不習慣沒有大括號和分號的狀態，但用一陣子後便會習慣(反而減少因為漏打產生的錯誤)。
另個案例：CSS最常使用的顏色定義

.box1 {
  background-color: #222;
}
.box2 {
  background-color: #333;
}
.box3 {
  background-color: #555;
}
.box4 {
  background-color: #777;
}
.box5 {
  background-color: #eee;
}

SASS使用變數加速開發：

$gray-darker:  #222
$gray-dark:    #333
$gray:         #555
$gray-light:   #777
$gray-lighter: #eee
.box1
  background-color: $gray-darker
.box2
  background-color: $gray-dark
.box3
  background-color: $gray
.box4
  background-color: $gray-light
.box5
  background-color: $gray-lighter

之後只要使用相同顏色的物件，都可以透過變數指定；假如需要修改也只需修改$宣告的部分即可。
簡單的介紹後有沒有感受到一些方便之處？之後我們再陸續探討，下回見。