vue和sass

如何在vue2.0中使用sass

cnpm install node-sass --save-dev

//安装node-sass

cnpm install sass-loader --save-dev

//安装sass-loader

cnpm install style-loader --save-dev

//安装style-loader

有些人安装的是 vue-style-loader 其实是一样的！

参考：https://www.jianshu.com/p/8e60048baeb7

Sass/SCSS 和纯 CSS

SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。

<style lang="scss" scoped="" type="text/scss"></style>

普通变量与默认变量

默认变量

sass 的默认变量仅需要在值后面加上 !default 即可。

$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

body{
    line-height:1.5;
}

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
 

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

body{
    line-height:2;
}

可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

。。。