Sass 簡介

您應該知道的

在繼續之前，您應該對以下內容有基本的了解：

  • HTML
  • CSS

如果您想先學習這些科目，請在我們的 主頁 上訪問這些教程。

什么是 Sass？

  • Sass 指的是 Syntactically Awesome Stylesheet（語法超棒的樣式表）
  • Sass 是一種 CSS 擴展
  • Sass 是一種 CSS 預處理器
  • Sass 完全兼容所有版本的 CSS
  • Sass 減少了 CSS 的重復，從而節省了時間
  • Sass 由 Hampton Catlin 設計，并由 Natalie Weizenbaum 于 2006 年開發
  • Sass 可以免費下載和使用

為什么要使用 Sass？

樣式表越來越大、越來越復雜，也越來越難維護。這是 CSS 預處理器可以提供幫助的地方。

Sass 允許您使用 CSS 中不存在的特性，比如變量、嵌套規則、mixin、導入、繼承、內置函數和其他功能。

一個關于 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 代碼。

提示：轉譯是一個術語，用于將用一種語言編寫的源代碼轉換/翻譯成另一種語言。

Sass 文件類型

Sass 文件的文件擴展名是 ".scss"。

Sass 評論

Sass 支持標準的 CSS 注釋 /* comment */，此外還支持行內注釋 // comment：

Sass 實例

/* 定義主要的顏色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 使用變量 */
.main-header {
  background-color: $primary_1; // 您可以在這里添加行內的評論
}