Sass 教學

Sass (英文全稱：Syntactically Awesome Stylesheets) 是一個最初由 Hampton Catlin 設計並由 Natalie Weizenbaum 開發的層疊樣式表語言。

Sass 是一個 CSS 預處理器。

Sass 是 CSS 擴展語言，可以幫助我們減少 CSS 重複的代碼，節省開發時間。

Sass 完全相容所有版本的 CSS。

Sass 擴展了 CSS3，增加了規則、變數、混入、選擇器、繼承、內置函數等等特性。

Sass 生成良好格式化的 CSS 代碼，易於組織和維護。

Sass 檔尾碼為 .scss。

Sass 實例

/* 定義變數與值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* 使用變數 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

閱讀本教程前，您需要瞭解的知識：

閱讀本教程，您需要有以下基礎：

為什麼使用 Sass?

CSS 本身語法不夠強大，導致重複編寫一些代碼，無法實現複用，而且在代碼也不方便維護。

Sass 引入合理的樣式複用機制，增加了規則、變數、混入、選擇器、繼承、內置函數等等特性。

我們可以舉個例子，我們會在 CSS 中重複使用很多次十六進制的顏色代碼，當有了變數之後，如果要改變顏色代碼，只要修改變數的值就好了：

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 代碼轉換為 CSS 代碼。