函式

@function 與 @mixin 相似，兩者的差異在於 @function 必須使用 @return 來返回結果，它運算後輸出是一個值，並非一段 CSS 樣式，@mixin 則可以使用 @include 產生一段 CSS 樣式。

@if

與其他程式語言一樣，Sass 的條件判斷也分為 @if、@else if、@else。

// scss
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
// css
p {
  color: green;
}

繼承（Extend）

• 繼承可以用 CSS 選擇器 或 % 開始命名

  使用普通的 CSS 規則，最後會編譯出很多用不到的樣式，也容易與其他樣式名衝突，所以，Sass 引入了「佔位選擇器」(placeholder selectors)，它看起來很像普通的 id 或 class 選擇器，只是 # 或 . 被替換成了 %，可以像 class 或者 id 選擇器那樣使用，當它們單獨使用時，不會被編譯到 CSS 文件中。

嵌套巢狀（Nesting）

Sass 嵌套可以解決 CSS 階層結構重複撰寫的問題。

#content article h1 {
  color: #333;
}
#content article p {
  margin-bottom: 1.4em;
}
#content aside {
  background-color: #eee;
}

變數（Variables）

變數使用 $ 來表示，變數名稱需以易懂，一眼就知道這個變數的用途為命名標準。變數寫在最上面，確保宣告可以讓 Sass 文件使用，賦值寫法與 CSS 屬性一樣。

簡介

Sass（Syntactically Awesome StyleSheets）是 CSS 的 preprocesser（預前處理器），誕生於 2007 年，是最早的 CSS 預處理器，目的是在撰寫 CSS 時減少反覆重工動作及更好維護樣式結構，撰寫 Sass 需進行編譯成原生的 CSS 才能使用（瀏覽器看不懂 Sass），需預前經過編譯這個動作成原生 CSS 瀏覽器才能閱讀。

混合（Mixins）

Mixins 的作用很像函式（function），主要用於重複使用的樣式區塊或產出具有變化性的樣式效果，它與函式一樣可以透過參數傳遞變數，mixins 是 Sass 很重要的功能。

另一種編譯方式

可以使用 liveSass 來編譯 Sass。

Masonry

Masonry 是一個自動佈局（Layout）垂直空間不同尺寸區塊的套件，它就像堆砌磚頭那樣將元素區塊一塊一塊相疊，例子：Pinterest。搭配 imagesloaded 套件可以形成網站設計中的瀑布流技術。

特點

Velocity 與 jQuery 的 animate 使用方式一樣，但多了顏色、變形、轉場的動畫效果。這裡的版本為 1.5.2 版本，可參考官方網站文件，2.0.0 版本以上以 Github 版本文件為主，兩者文件本版不同，使用上也有些差異。Velocity 受 jQuery 影響，支援 Chain 串鏈方法。