SASS學習系列之(二)--------- SASS，SCSS環境搭建(node-sass)

SASS，SCSS環境搭建(Ruby) http://blog.csdn.net/wx11408115/article/details/78019576

前期準備
1. node 環境. (沒有安裝的同學戳這裏 window 下安裝node.js http://blog.csdn.net/wx11408115/article/details/76609889

來來來，開始了

1.安裝cnpm（https://npm.taobao.org/）

npm install -g cnpm --registry=https://registry.npm.taobao.org

沒有報什麼錯就可以了，

2. Node-SASS安裝

2.1 首先咱們新建個空文件夾，然後用命令行切到該文件夾下

cd 目標文件夾
npm init     (初始化一個項目)

初始化好了後，該空文件夾就會多一個package.json 的文件， 裏面記錄的內容是我們剛剛自己寫的，

2.2 在項目文件夾下安裝node-sass

cnpm install --save-dev node-sass      （cmd命令行中輸入）

說明：–save-dev自動將node-sass加入到項目文件夾下的package.json中

現在我們可以看到文件夾中又多了一個文件夾

在 package.json中的配置下sass

{
  "name": "wifi",
  "version": "1.0.0",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "sass": "node-sass"  /*添加這句，複製的時候，需要去掉這句話哈，json註釋不帶這樣的*/
  },
  "author": "WiFi_Uncle",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.5.3"
  }
}

保存

測試下

在文件夾中新建個input.scss
裏面內容爲:

.container {
    .main {
        color: #000;
    }
}

然後編譯下
鍵入命令

npm run sass input.scss output.css

打開看看

ok了！

最後感謝233大神指點。