vue项目使用sass，sass与scss异同

scss是sass3引入的新语法，语法完全兼容css3,也完全继承了sass的功能，也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。

唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。 

在vue中使用sass

第一步安装依赖包

npm install sass-loader  --save-dev
npm install node-sass --save-dev 

第二步配置识别sass

在build文件中webpack.base.conf.js文件module.rules中给数组添加一个对象，解释scss文件的loader

  { 
     //配置编译识别sass! 
     test: /\.scss$/,
     loaders: ["style", "css", "sass"]
  } 

第三步使用

<style lang="scss" scoped >
    $fontColor:red;
    .box1{
        color:$fontColor;
    }
    @mixin normStyle($width,$height,$bgcolor){
        width:$width;
        height:$height;
        background:$bgcolor;
    }
    .box2{
        @include normStyle(200px,200px,green);
    }
</style>

使用vscode的时候需要安装，如不安装声明变量的时$符号会报红，虽然不影响运行，但极不美观