关于uni-app:uniapp中scss的简单使用

22次阅读

共计 568 个字符,预计需要花费 2 分钟才能阅读完成。

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, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!!!

正文完
 0