SASS
全名是 Syntactically Awesome Stylesheets，當然不是我說得那個（媽媽有說，認真就輸了（揍飛），也許有人會說，踏碼的有一個 CSS 就已經很難搞了，現在來搞一個 SASS 來自作孽幹麼？或者是，這一切一定都是你們這些 programmer 在自 HIGH 用的啦，一切都是阿共啊A陰謀啦～之類的。BUT！
人生最厲害的就是這個 BUT！（這梗你要用幾次啦！
俗話說得好，好的老師帶你上天堂，不好的老師讓你住套房，好的工具帶你上天堂，沒有工具讓你住病房！這也不是沒有道理的！這就是一個好工具，當然，好工具就一定會有一個前提！
請對 CSS 有一定的熟悉程度再來玩，這不是門檻，而是必備條件。
SASS 是一個語言，是一個將 CSS 給簡化，並加入可程式化的特性的一種語言。你可以不要那麼緊張的把他想成那眾多的程式語言。不諱言，你要說他是，那他就是，你要說他不是，那他就不是。至於他可以做到什麼事情？請看：
- 可以用變數（$）。
- 可以做運算（+, -, *, /, %）。
- 可以用函式（@mixin）。
- 可以載入（@import）與擴展（@extend）。
- 可以用判斷式（@if, @else if, @else）。
- 可以用迴圈（@for, @while）。
首先，我們先來認識一下 SASS 到底是什麼東西。首先，他有兩種寫法，一種是 sass，另一種是 scss，這兩種有什麼差別呢？
/* 這種叫做 scss
$color: "#ff3333";
#h1 {
background-color: #{$color};
}
/* 這種叫做 sass
$color: "#ff3333"
#h1
background-color: #{$color}
我已經回不去了。
一旦開使用 SASS 之後，基本上應該就不會回去寫 CSS 了。底下來介紹一下一些基本用法：
/* 變數建立方式
$color: "#ff3333"
$width: 1000px
/* 函式建立方式（@mixin
@mixin box_radius($radius: 10px)
-moz-box-radius: #{$radius}
-webkit-box-radius: #{$radius}
box-radius: #{$radius}
/* 關聯式寫法（Nesting and Nesting properties）
h1 span
margin: 0
a
color: #ff3333
&:hover
color: #ffff33
>span
color: #3333ff
font:
weight: bold
size: 14px
/* 引入與擴展（@import, @extend）
外部的 sass 檔案前面必須前置底線（所以外部名稱實為：_import_css.sass）
@import "import_css"
.extend_class
margin: 0
.my_class
@extend .extend_class
padding: 0
/* 運算
$width: 1000px
.my_class
width: $width - 300px
/* 傳入值（Interpolation）
我們傳入變數的方式有兩種，一種是傳入變數的值，一種是傳入變數。
其中 #{ } 的寫法就是傳入值。
倘若我們在這個例子的 .my_class1 使用 $color1，
則產生出來的 css 的 color 就會變成 "#ff3333" 了。
而倘若把 $color2 使用 # { } 傳入，則不影響所傳入的值。
傳入值有什麼好處？請看 .my_class3 應該就很清楚。
$color1: "#ff3333"
$color2: #3333ff
$color3: "white"
.my_class1
color: #{$color1}
.my_class2
color: $color2
.my_class3
a.#{$color3}
color: #{$color3}
/* 迴圈
@for $i from 1 through 3
.my_class_#{$i}
width: 100px * $i
/* 判斷式
$color: "white"
p
@if $color == "white"
color: white
@else if $color == "blue"
color: blue
@else
color: block
然後，還有一個超強的工具，叫做 Compass！關於這個東西 XDite 寫了一篇介紹！我也有在使用，一樣也是要 Ruby 環境的，而且他還有賣 GUI 的工具。不過我已經習慣用指令去做了，所以對我來說是沒差的。
Compass 也是超強！
好工具，不用嗎？
更多介紹：
