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
