Sass 簡介
Sass - http://sass-lang.com/。 Sass 是什麼？
Sass 是為了簡化 CSS 文件的重覆內容而設計的擴充語言。這不是 W3C 正式的語法規格，而是 Sass 設計者自定的。相同目的者還有 LESS 。這些擴充語言存在語法差異。
Sass 同時也是指將 Sass 語言轉譯為正規 CSS 語言的工具。
我論 Sass 的設計源由
我先說一件嚴苛的事實。雖然 CSS 已經出現超過15年了 (CSS1 是1996年公開的)。但長久以來，一直不曾出現視覺化的 CSS 編輯工具。設計者始終都是用 CSS 語言，透過文字描述他們腦海中的設計樣式。不幸的是，除了程式設計師，大部份設計者更習慣以圖像描述他們的設計，而不是文字。就此看來，程式設計師其實更像是劇本作家，英文名詞 scriptwriter 或 programmer 的原始意涵已經說明了這一點。如果你不是查英漢字典時只看第一個中文解釋的人，應該知道這點。
W3C 大概也沒想過這麼多年來，設計者都沒有圖像式的 CSS 設計工具可用，所以 css 文件內容一直都充斥著重複性的文字。例如觸目可及的 background-color, font-size 等。理想中應該由圖像式設計工具存檔時產生的 css 文件，實際上幾乎都是人工撰寫而來。
既然理想中的設計工具遙不可見，那就先想辦法簡化人工抄寫的工作吧。於是 Sass 就冒出來了。它擴充了 CSS 語法，讓設計者可以用更少的文字描述樣式內容。由於 Sass 不是正式的語法規格，得不到正統的 CSS 呈像工具，如瀏覽器的直接支持，故它還必須提供一套轉譯工具，將 Sass 語言轉成正式的 CSS 語言。
如何使用
使用 Sass 時，我們必須做兩件事:
- 學習 Sass 語言。喔，對了，你要先學 CSS 語言。
- 安裝 Sass 的轉譯工具。工具有很多選擇，請參考此「Install Sass」列表。
Sass 是由 Ruby 的使用者開發出來的。所以對 Ruby on Rails 社群來說，比較有親和感。 不過它並不限定要搭配 Ruby on Rails 。時至今日，它也有不少 GUI 轉譯工具。這些工具有些並不需要安裝 Ruby 。
Sass 語法摘要
以下範例主要取自「Sass Basics」。 說明是我自己寫的，表達方式跟 Sass Basics 相反。我先說 CSS 使用現況，再說 Sass 改變了什麼。
變數
變數用法非常簡單，任何一個 shell script/PHP 使用者都能一眼理解。就是用 $ 符號。如下:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}轉譯為 CSS 後，在 body 樣式宣告中的 $font-stack、$primary-color 就會替換為實際的值。
body {
font: 100% Helvetica, sans-serif;
color: #333;
}巢狀結構
XML/HTML 具有巢狀結構，但 CSS 用於描述巢狀結構樣式的形式卻是平面的。如下：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}Sass 則加入了巢狀描述語法，所以上述的 CSS 內容可以改寫成下列 Sass 內容:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}Mixins
Mixins 可以理解為巨集(macro)。最常見的應用就是處理像 border-radius 這類屬性。
基於歷史因素，定義邊角圓弧半徑時，我們習慣前綴瀏覽器代碼。所以定義一個 border-radius 屬性時，我們往往要寫 5 行。如下:
.box1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.box2 {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}使用 Sass 的 Mixins 就可以簡化為一行。首先用 Sass 關鍵字 @mixin 定義一個巨集 border-radius 且代入一個半徑參數：$radius，內容如下：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}套用 border-radius($radius) 這個 mixin ，原本的樣式內容就可簡化為:
.box1 { @include border-radius(10px); }
.box2 { @include border-radius(15px); }繼承樣式類別
CSS 的樣式類別，只用於分類視覺元件，它本身不具繼承性。所以我們以前要這麼寫:
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}HTML 部分:
<p class="message success">
成功訊息
</p>
<p class="message error">
錯誤訊息
</p>
<p class="message warning">
警告訊息
</p>Sass 則允許用關鍵字 @extend 繼承樣式類別，所以可改寫：
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
/* 繼承 .message 所定義的 border 1px, padding 10px, color #333 內容 */
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;sssssssssssssssssss
border-color: yellow;
}而 HTML 的部份則可以改寫為:
<p class="success">
成功訊息
</p>
<p class="error">
錯誤訊息
</p>
<p class="warning">
警告訊息
</p>注意，使用這個功能時，可能會影響到某些 JavaScript UI 框架的運作。因為有些框架會利用 CSS 類別分辨視覺元件的用途甚至修改它的行為。對那些框架來說，一個視覺元件上套多個 CSS 類別是正常的。例如原本的 HTML 的 3 個 p 段落的 CSS 類別都套了 message ，那些框架就知道這 3 個 p 的用途是表達軟體訊息。改寫後少了 message 類別，那些框架就分不出這 3 個 p 和其他的 p 有何不同了。當然你也可以不改 HTML 。
更多語法請參考 Sass 網站/。
需要用嗎?
Sass 得不到瀏覽器的直接支持，是使用上最大的不便。對設計者來說，還要從網站規模來決定值不值得用。如果你要設計的是 single-page application ，那基本上不需要用 Sass 。
當你發現你的 CSS 文件分成好幾份，或者有幾百個樣式定義，而你每次修改都要做大量的搜尋與複製貼上工作時，你或許需要 Sass 或 LESS 這類工具。