如何在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。默认变量的价值在进行组件化开发的时候会非常有用。
。。。