vue2.0中使用sass
第一部分：Sass語言
Sass是一種強大的css擴展語言（css本身並不是一門語言），它允許你使用變量、嵌套規則、mixins、導入等css沒有但開發語言（如Java、C#、Ruby等）有的一些特性，並且完全兼容CSS語法。Sass有助於保持大型樣式表結構良好。
Sass有兩種語法。
一種稱為SCSS，是一個CSS3語法的擴充版本，也就是說，所有符合CSS3語法的樣式表也都是具有相同語法意義的SCSS文件，SCSS樣式表文件要以.scss擴展名結尾。在vue中，我們可以使用<style lang="scss"></style>來標誌裏面的內容是以SCSS語法來書寫的。
一種稱為SASS，是Sass以前的語法，它和python一樣，沒有{}大括號來標誌程序塊，而是以縮進來標誌嵌套層級；而且也不使用分號，而是用換行符來分隔屬性。SASS樣式表文件要以.sass擴展名結尾。在vue中，我們可以使用<style lang="sass"></style>來標誌裏面的內容是以SASS語法來書寫的。
第二部分、VUE2.0中集成Sass
Step1：在項目中安裝Sass
1 npm install node-sass --save-dev 2 npm install sass-loader --save-dev
PS：有時因為網絡原因，安裝起來比較慢，這裏推薦的和大家的一樣，使用淘寶的，可以臨時用一下淘寶的鏡像，不用非得將默認的鏡像源更新為淘寶的。如下所示：
1 $ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
說明：
--registry=https://registry.npm.taobao.org 淘寶npm包鏡像
--disturl=https://npm.taobao.org/dist 淘寶node源碼鏡像，一些二進制包編譯時用
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 這個才是node-sass鏡像
Step2：配置Sass解析器
在webpack.base.conf.js中，modules結節下的loaders結節中添加es2015的支持，如下所示：
1 module: {
2 loaders: [
3 {
4 test: /\.js$/,
5 exclude: /(node_modules|bower_components)/,
6 loader: ‘babel‘,
7 query: {
8 presets: [‘es2015‘]
9 }
10 }
11 ],
12 }
PS：不安裝的話會出現如下錯誤：Couldn‘t find preset "es2015" relative to directory
同樣是在webpack.base.conf.js中，modules結節下的rules節點中添加sass的解析器，如下所示：
1 module: {
2 rules: [
3 {
4 test: /\.scss$/,
5 loaders: ["style", "css", "sass"]
6 },
Step3：嘗試使用Sass的SASS語法
以下是使用傳統的CSS樣式的頁面：
樣式如下：
1 <style>
2 .body {
3 color:red;
4 }
5 </style>
我們修改樣式為：
1 <style lang="sass">
2 $body-color: red;
3
4 .body
5 color: $body-color;
6 </style>
樣式依然生效。
Step4：嘗試使用Sass的SCSS語法
1 <style lang="scss">
2 $body-color:red;
3 .body {
4 color: $body-color;
5 }
6 </style>
樣式依然生效。
說明：這個只是最簡單的例子，而且是與vue結合，如果你需要單獨編譯.sass文件或者.scss文件，那麽你需要安裝Ruby， 同時可以讓SASS監控某個樣式表的變動，實現樣式的熱部署。
參考文檔
http://www.ruanyifeng.com/blog/2012/06/sass.html
https://www.w3cplus.com/sassguide/
http://www.jianshu.com/p/67f52071657d
https://www.cnblogs.com/walls/p/6258974.html
http://www.jianshu.com/p/8e60048baeb7
https://www.cnblogs.com/qqqiangqiang/p/5359986.html
http://sass.bootcss.com/
https://www.cnblogs.com/crazycode2/p/6535105.html
https://zhuanlan.zhihu.com/p/25106145
vue2.0中使用sass