學習如何安裝Sass

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

我們可以使用 npm（NPM 使用介紹）來安裝 Sass。

npm install -g sass

注：國內 npm 建議使用淘寶映象來安裝，參考：NPM 國內慢的問題解決

我們可以使用 Windows 的包管理器 Chocolatey 來安裝：

choco install sass

Mac OS 可以使用 Homebrew 包管理器來安裝：

brew install sass/sass/sass

更多安裝方法可以檢視官網：

我們的教程使用的是 npm 安裝的 sass，安裝完成後可以檢視版本：

$ sass --version 1.22.12 compiled with dart2js 2.5.0 接下來我們建立一個 runoob-test.scss 檔案，內容為：
runoob-test.scss 檔案程式碼:

/* 定義變數與值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* 使用變數 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

然後在 行輸入下面 ，即將 .scss 檔案轉化的 css 程式碼：

$ sass runoob-test.scss 
@charset "UTF-8";
/* 定義變數與值 */
/* 使用變數 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

我們可以在後面再跟一個 .css 檔名，將程式碼儲存到檔案中：

$ sass runoob-test.scss runoob-test.css

這是會在當前目錄下生存 runoob-test.css 檔案，程式碼如下：

@charset "UTF-8";
/* 定義變數與值 */
/* 使用變數 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}
/*# sourceMappingURL=runoob-test.css.map */

原文地址：