CSS是用來開發網頁樣式，為CSS加入編程元素，這被叫做"CSS預處理器"（css preprocessor）
SASS (Syntactically Awesome StyleSheets)是一種CSS的開發工具，可以用它來定義一套新的語法規則和函數，以加強和提升CSS。通過這種新的編程語言，可以使用最高效的方式，以少量的代碼創建復雜的設計。
1、嵌套
如果要寫一大串指向頁面中同一塊的樣式時，css需要重復寫選擇器，一遍又一遍地寫同一個ID：
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { ">而sass只寫一遍，嵌套規則塊。使樣式可讀性更高
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
2、變量
你可以把顏色值存儲在變量中，然后用於整個網站的設計。
而且極大地確保了整個設計項目的可用性和一致性。
實用的：結構變量
$pageWidth: 100%; $containerWidth: 960px;
描述的：顏色變量
$grey: #E3E3E3;
$blue: #1f605b;
3、混合宏
混合宏是小的代碼片段（類似局部），你可以在項目中任何需要的地方，通過@include來復用它們。
（1）不帶參數混合宏：
在 Sass 中，使用“@mixin”來聲明一個混合宏。如：
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
（2）帶參數混合宏：
除了聲明一個不帶參數的混合宏之外，還可以在定義混合宏時帶有參數，如：
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
（3）復雜的混合宏：
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
4、數學函數
在樣式表中使用數學函數。這在創建不同大小的網格時是特有用的，或者可以為實現更好的動態響應式設計。
5、其他
如隱藏注釋，占位符選擇器，數據類型，顏色操作，變量的默認值，擴展等。