Vue3 使用sass

安装扩展和依赖

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

文件后缀

文件使用scss后缀
写style时声明lang=scss

<style scoped lang="scss">
# 这里写样式
</style>

使用sass的好处

可以嵌套

# 不使用sass可以这么写
.container a {
 color:black
}

# 使用sass可以这么写
# 层级鲜明
.container {
  a {
   color:black;
  }
}

可以声明使用变量

 $color:black;
 .container{
   a {
     color:$color;
   }
 }

可以封装函数

src/assets/sass/mixin.scss
通过 @mixin 声明函数
该函数创建颜色style,不传参默认黑色

@mixin create_color($color:black){
  color:$color;
}

通过@import引入封装函数的文件
通过@include调用函数

<style lang="scss" scoped>
     @import "src/assets/sass/mixin.scss";
    .container{
      a {
        @include create_color(red);
     }
    }
</style>