在過去 sass/scss 興起的時期，最常搭配 compass 以及相關的 mixins 來進行開發

但是隨著編輯的 sass/scss 內容開始變多之後，底層執行編譯的效能也開始下降

這樣的編譯速度對於需要經常性更新功能的專案而言，使用過程會非常不便，讓體驗變得非常不友善

因此，在後來就有了另一個替代方案 - Node-sass

關於 Node Sass

Node-sass 可以將 .scss 檔案轉換成 css，並且維持著良好的效能

它是藉由Node.js 來控制 LibSass 的方式來運作，因此基本底層是以 LibSass (C++ 編寫的 Sass 編譯器 ) 來編譯

安裝

先初始化環境

npm init

yarn install

接下來，安裝 node-sass

npm install node-sass 

//or 

yarn add node-sass

建立 scss & css 資料夾及檔案

建立 scss/main.scss 與 css/ 資料夾

scss/main.scss

$base-txt-color: #bada55;
$base-bg-color: #333;

.hello { 
  color: $base-txt-color;
  background-color: $base-bg-color; 
}

設定 package.json

開啟 package.json 檔案，並且在"script"物件加入下方內容

package.json

  "scripts": {
    "build-css": "node-sass scss/main.scss css/main.css",
  }

執行 script

在 terminal 輸入下方指令，執行 script 新增的動作，將 scss 轉換為 css

npm run build-css

//or

yarn build-css

watch 自動監測

watch 可以以一次啟用就能隨時監督檔案變更動作，一有變更就要執行 build-css

只要加入一個 -w 即可啟用

開啟 package.json 並且在 scripts 的 build-css 加入 -w

package.json

  "scripts": {
    "build-css": "node-sass -w node-sass scss/main.scss css/main.css",
  }

接下來，在 termilal 輸入下方指令，啟用 watch 功能

npm run build-css

//or

yarn build-css

接下來，變動 scss/main.scss 的內容，就會看到 termial 視窗會根據變動時間點來進行 Rendering

其他

node-sass 有許多參數可以使用，例如，壓縮輸出的css內容，則可以直接加入 output-style package.json

  "scripts": {
    "build-css": "node-sass -w scss/main.scss css/main.css --output-style compressed",
  }

這裡則列出相關的選項作為參考:

    -w, --watch                Watch a directory or file
    -r, --recursive            Recursively watch directories or files
    -o, --output               Output directory
    -x, --omit-source-map-url  Omit source map URL comment from output
    -i, --indented-syntax      Treat data from stdin as sass code (versus scss)
    -q, --quiet                Suppress log output except on error
    -v, --version              Prints version info
    --output-style             CSS output style (nested | expanded | compact | compressed)
    --indent-type              Indent type for output CSS (space | tab)
    --indent-width             Indent width; number of spaces or tabs (maximum value: 10)
    --linefeed                 Linefeed style (cr | crlf | lf | lfcr)
    --source-comments          Include debug info in output
    --source-map               Emit source map
    --source-map-contents      Embed include contents in map
    --source-map-embed         Embed sourceMappingUrl as data URI
    --source-map-root          Base path, will be emitted in source-map as is
    --include-path             Path to look for imported files
    --follow                   Follow symlinked directories
    --precision                The amount of precision allowed in decimal numbers
    --error-bell               Output a bell character on errors
    --importer                 Path to .js file containing custom importer
    --functions                Path to .js file containing custom functions
    --help                     Print usage info

另外，如果有使用 gulp ，則可以另外參考 gulp-sass 以及搭配 gulp-watch 來監控

…