sass在vue中的一些用法

1.在vue-cli3.0中引入sass

1.1通过npm下载sass

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

1.2在.vue文件中的style设置lang="scss"

<style lang="scss">

</style>

2.在vue-cli2.0中引入sass的话，

2.1通过npm下载sass

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

2.2在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

2.3在.vue文件中的style设置lang="scss"

<style lang="scss">

</style>

3.在.vue文件中引入外部sass文件

<style lang="scss">
@import "../assets/sass/element.scss";//sass文件的路径
</style>

4.scss文件的编码格式

@charset "utf-8";

5.定义混合指令 @mixin

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: red;  
    background: $background;  
}
@mixin text($color:red) {
    color:$color
}
@mixin background($back:#58bc58) {
    background: $back;
}
@mixin display($display:flex) {
    dispaly:flex;
}

6.引用 @mixin(@include 名字)

<style lang="scss">
.ps{
  @include button;
}

.color-red{
  @include text(#58bc58);
}
</style>