Sass 安裝

本章節我們主要介紹 Sass 的安裝與使用。

NPM 安裝

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

npm install -g sass

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

Windows 上安裝

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

choco install sass

Mac OS X (Homebrew)安裝

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

brew install sass/sass/sass

更多安裝方法可以查看官網：https://sass-lang.com/install

使用介紹

我們的教學使用的是 npm 安裝的 sass，安裝完成後可以查看版本：

$ sass --version 1.22.12 compiled with dart2js 2.5.0 接下來我們創建一個 zaixian-test.scss 檔，內容為：

zaixian-test.scss 檔代碼:

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

/* 使用變數 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}
然後在命令行輸入下麵命令，即將 .scss 檔轉化的 css 代碼： 
$ sass zaixian-test.scss
@charset "UTF-8";
/* 定義變數與值 */
/* 使用變數 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

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

$ sass zaixian-test.scss zaixian-test.css
這是會在當前目錄下生存 zaixian-test.css 檔，代碼如下： 
@charset "UTF-8";
/* 定義變數與值 */
/* 使用變數 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

/*# sourceMappingURL=zaixian-test.css.map */