uniapp 在uni.scss 根据@mixin定义方法 、通过@include全局使用

在官方文档中提及到uni.scss中变量的使用,而我想定义方法,这样写css样式更方便

一、官方文档的介绍

根据官方文档我知道,在这面定义的变量全局都可使用。接下来我要在这里定义方法。

二、在uni.scss文件中定义方法

我在uni.scss文件中定义了 flex的简写方法。

css 复制代码
@mixin flex-teng($direction, $justify, $align, $wrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

我在文件中使用

css 复制代码
.test{
		@include flex-teng(row, space-between, center, nowrap);
		padding: 20rpx 0;
}
相关推荐
用户4794928356915几秒前
同样是 #,锚点和路由有什么区别
前端·javascript
Hero_112710 分钟前
在pycharm中install不上需要的包
服务器·前端·pycharm
爱上妖精的尾巴23 分钟前
5-26 WPS JS宏数组元素添加删除应用
开发语言·前端·javascript·wps·js宏
是谁眉眼27 分钟前
wpsapi
前端·javascript·html
谅望者28 分钟前
Flexbox vs Grid:先学哪一个?CSS 布局完全指南(附可视化示例)
前端·css·html·css3·css布局·css flexbox·css grid
老华带你飞1 小时前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·商城推荐系统
JS.Huang1 小时前
【JavaScript】Pointer Events 与移动端交互
前端·javascript
一 乐1 小时前
物业管理系统|小区物业管理|基于SprinBoot+vue的小区物业管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端
H_HX1261 小时前
vue3 - 图片放大镜效果实现
前端·vue.js·vue3·vueuse·图片放大镜
初遇你时动了情2 小时前
uniapp/flutter中实现苹果IOS 26 毛玻璃效果、跟随滑动放大动画
flutter·ios·uni-app