接觸SASS之前，撰寫CSS很容易但是要維護內容卻很麻煩，比如說：「改某頁面的h2顏色」、「網頁主色調改成xx色」…這些工作都會浪費很多時間，透過SASS可以有效管理CSS，依照目前的使用經驗大概列出幾個特色出來：

１．節省時間

重複性高的CSS，設定「變數」，修改CSS時，改「變數」的值，就能全部都修改。

EX. 設定超連結主色為#84dd99，變數為linkcolor_main，之後要改超連結主色就改linkcolor_main，超連結主色就全改完了。

SASS：設定變數

$linkcolor_main:#84dd99

CSS：套入變數

.nav a{color：$linkcolor_main;} 
.btn a{color：$linkcolor_main;} 

２．CSS模組化

比如「變數」、「layout」、「元件」、「常用語法」..並彙整import在一個檔案。

如下方程式就是彙整成一個SASS檔案，編譯轉成CSS檔案，並讓html讀取該檔案。

@import "mixin"//所有全域變數與Mixin
@import "reset"//reset.css
@import "layout"//共同框架,第一層
@import "module"//button,form,table
@import "pages/product"

３．CSS段落分明

SASS編譯後的CSS，不用再用tab或空白鍵調整程式和括號，它會自動調整段落，讓css語意更清楚。

SASS

.Menu 
    float: right
    line-height: 51px
     li 
      float: left
      width: 94px
      text-align: center
      list-style: none
         a 
          text-decoration: none
          color: #00a67d
          display: block
          margin: 0 1px

如果不習慣這種寫法，可用SCSS寫法，效果一樣，只是加了外框和分號，
自己目前是用SCSS來寫較習慣。

SCSS

.Menu {
    float: right;
    line-height: 51px;//高度與行高一樣，則可讓文字垂直置中
      li {
      float: left;
      width: 94px;
      text-align: center; 
      list-style: none;//li不要出現符號樣式
          a {
          text-decoration: none;
          color: #00a67d;
          display: block;
          margin: 0 1px; 
          }
      }
}    

SASS和SCSS輸出結果都相同

CSS

.Menu {
    float: right;
    line-height: 51px;//高度與行高一樣，則可讓文字垂直置中
}    
.Menu li {
    float: left;
    width: 94px;
    text-align: center; 
    list-style: none;//li不要出現符號樣式
    }
    
.Menu li a {
      text-decoration: none;
      color: #00a67d;
      display: block;
      margin: 0 1px; 
      }