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