关于uni-app:uniapp中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.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!!!

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理