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