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语法来书写的。

Step1：在项目中安装Sass      

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

  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结节中添加如下所示：   

{
 　test: /\.sass$/,
　 loaders: ['style', 'css', 'sass']
}

  如果PS：出现如下错误：Couldn't find preset "es2015" relative to directory

3、在APP.vue中修改style标签

<style lang="scss">

4、然后运行项目

$ npm run dev

 5、修改APP.vue的样式，看到效果说明你已成功配置好sass

 

 

 

 

 

 

 

 

 

 

sass实例