uni-app中scss的简单使用

1.开发环境 uni-aapp+scss
2.电脑系统 windows10专业版
3.在实验uni-app开发的过程中,我们可能会使用到scss,下面我来分享一下scss简单的使用,希望对你有所帮助!
4.如果你的项目中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
混合器使用@mixin标识符定义,下边的这段sass代码，定义了一个混合器，目的是使用flex布局。

在 uni.scss中添加如下代码:

@mixin  chenflex {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
}

5.在使用的模板中添加如下代码:

.title-wrap{
      width: 100%;
      height: 100rpx;
      background-color: #ccc;
      padding: 10rpx;
      box-sizing: border-box;
      @include chenflex; //使用方法
    }

6.混合器传参使用,在uni.scss中添加如下代码:

@mixin chennfontclolr($chencolor888,$chenfosize,$chenw){
 color: $chencolor888;
 font:{
  size:$chenfosize;
  weight:$chenw ;
 }
}

7.在使用的模板中添加如下代码:

@include chennfontclolr(
        $chenw:900,
        $chencolor888:blue,
        $chenfosize:30rpx
      )
      
      //注意 最后一个参数的位置不要加 逗号,不然会报错
      //$chenfosize:30rpx,   //在这里是错误写法
      //这样的传参写法可以不考虑参数的顺序问题,但是如果参数不写或者是漏写的话就会报错

8.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!!!