Sass 簡介
您應該已經瞭解的內容
在繼續之前，您應該對以下內容有一個基本的瞭解：
- HTML
- CSS
如果您想先學習這些主題，請在我們首頁上查詢教程。
什麼是 Sass？
- Sass 代表 Syntactically Awesome Stylesheet（語法優美的樣式表）
- Sass 是 CSS 的擴充套件
- Sass 是一個 CSS 預處理器
- Sass 完全相容所有版本的 CSS
- Sass 減少了 CSS 的重複，從而節省了時間
- Sass 於 2006 年由 Hampton Catlin 設計，Natalie Weizenbaum 開發
- Sass 可免費下載和使用
為什麼要使用 Sass？
樣式表變得越來越大、越來越複雜，也越來越難以維護。這時，CSS 預處理器就可以派上用場了。
Sass 允許你使用 CSS 中不存在的功能，例如變數、巢狀規則、混合（mixins）、匯入（imports）、繼承（inheritance）、內建函式等。
Sass 用途的一個簡單示例
假設我們有一個網站，有三種主色調
#a2b9bc
#b2ad7f
#878f99
那麼，你需要輸入多少次這些 HEX 值？很多次。如果出現相同顏色的變體呢？
與其多次輸入上述值，不如使用 Sass 並這樣寫
Sass 示例
/* 為主色定義變數 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 使用變數 */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
因此，當使用 Sass 時，如果主色調發生變化，你只需要在一個地方更改即可。
Sass 如何工作？
瀏覽器無法理解 Sass 程式碼。因此，你需要一個 Sass 預處理器來將 Sass 程式碼轉換為標準的 CSS。
這個過程稱為轉譯（transpiling）。所以，你需要提供一些 Sass 程式碼給轉譯器（某種程式），然後得到一些 CSS 程式碼。
提示： 轉譯（Transpiling）是指將一種語言的原始碼轉換/翻譯成另一種語言。
Sass 檔案型別
Sass 檔案具有 ".scss" 副檔名。
Sass 註釋
Sass 支援標準的 CSS 註釋 /* 註釋 */，此外它還支援單行註釋 // 註釋
Sass 示例
/* 定義主色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 使用變數 */
.main-header {
background-color: $primary_1; // 這裡可以放一個單行註釋
}
