SASS學習系列之三--------- node-sass 自動編譯scss 文件

前期準備：

首先你得有node環境，和一個已能手動編譯scss的環境
1. node 環境. (沒有安裝的同學戳這裏 window 下安裝node.js http://blog.csdn.net/wx11408115/article/details/76609889
2. SASS，SCSS環境搭建(node-sass) http://blog.csdn.net/wx11408115/article/details/78023466
3. SASS，SCSS環境搭建(Ruby) http://blog.csdn.net/wx11408115/article/details/78019576

開始

1. 在node-sass環境中，執行

   node-sass –watch <源文件> <目標文件>

node-sass --watch src/input.scss dist/output.css

1. 在ruby 環境中

sass --watch <源文件>  <目標文件>  

(ps: 我用的是node-sass，所以這個我沒自測，以下都是以node-sass環境編譯的)

我們看看效果

注意:

在執行命令：node-sass –watch src/input.scss dist/output.css 的時候，光標應該是一直在閃爍着，不要ctrl+c終止。

監聽文件夾下所有文件

node-sass  -w -r <源文件夾> -o <目標文件夾>    //它只會跟蹤同名文件，沒有則新建
-w, --watch                Watch a directory or file //監聽
-r, --recursive            Recursively watch directories or files  //遞歸地查看目錄或文件
-o, --output               Output directory //輸出目錄

命令詳情見: https://www.npmjs.com/package/node-sass

它會在目標文件夾下新建一個同名的css文件，然後關聯，這樣源文件夾下所有文件，都和目標文件夾下所有相對應的文件名的css關聯起來了，然後任意改動源文件某個scss文件，相對應的css也會改。
效果圖

小tips：用sublime 開雙視圖能更好的看到效果，具體設置View——>Layout——具體喜歡哪種選哪種

我的package.json

{
  "name": "wifi",
  "version": "1.0.0",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "sass": "node-sass"
  },
  "author": "WiFi_Uncle",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.5.3"
  }
}

簡書地址: http://www.jianshu.com/p/5c689d8ba230