關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

Node sass 入門 [筆記]

在過去 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 來監控

...


如果這篇文章對你有幫助,請在這裡點個讚



node-sass-tutorial

最新文章推薦