Sass 是什麼？CSS 預處理器入門與它解決的五個問題

兩者是同一個語言的兩種寫法。SCSS 用大括號與分號，副檔名 .scss，語法是 CSS 的超集合，任何合法的 CSS 都是合法的 SCSS；縮排語法用縮排取代大括號，副檔名 .sass。現在絕大多數專案用的都是 SCSS。

裝 Dart Sass，也就是 npm 上的 sass 套件。LibSass 與 Ruby Sass 都已經停止維護，新功能不會再加，舊專案應該遷移過來。

看不懂。瀏覽器只認得 CSS，.scss 檔必須先經過編譯產生 .css 檔，網頁載入的永遠是編譯後的那份 CSS。

Sass（Syntactically Awesome Style Sheets）是一種用來撰寫網頁樣式的語言，寫完之後會被編譯成一般的 CSS 供瀏覽器使用，所以它被歸類為 CSS 預處理器（CSS Preprocessor）。

重點在 預處理 這三個字：瀏覽器從頭到尾都只認得 CSS，Sass 提供的變數、迴圈、函式全都在編譯階段就被算完、換成單純的 CSS，執行時不留下任何痕跡。它不是新的樣式技術，是寫樣式時多墊的一層工具。

它解決什麼問題

原生 CSS 是一份宣告清單，沒有變數以外的抽象能力。專案一大就會遇到這五件事：

用一段最短的例子看差別：

scss

$brand: #2965f1;

.card {
  border: 1px solid $brand;

  &__title {
    color: $brand;
  }
}

編譯出來就是普通得不能再普通的 CSS：

css

.card {
  border: 1px solid #2965f1;
}
.card__title {
  color: #2965f1;
}

Sass 有兩種寫法，指的是同一個語言：

寫法	副檔名	特徵
SCSS	`.scss`	用大括號與分號，是 CSS 的超集合
縮排語法	`.sass`	用縮排取代大括號，不寫分號

scss

/* SCSS */
.card {
  color: #333;
}

sass

/* 縮排語法 */
.card
  color: #333

SCSS 是 CSS 的超集合，意思是任何一份合法的 CSS 直接改副檔名就是合法的 SCSS，遷移舊專案幾乎零成本。這也是它成為主流的原因。

本系列一律使用 SCSS

往後所有範例都是 .scss 寫法。兩者的差別只在標點，觀念完全共用，細節見語法構成。

「Sass」是語言規格，實作它的程式有三個，現在只剩一個活著：

實作	狀態	說明
Dart Sass	現行標準	官方主推，新功能只會出現在這裡。npm 上的 `sass` 套件就是它
LibSass	已停止維護（2020）	C++ 實作，`node-sass` 包的就是它，不支援模組系統
Ruby Sass	已停止維護（2019）	最初的實作