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;
}
相关推荐
Mintopia6 分钟前
🌌 信任是否会成为未来的货币?
前端·人工智能·aigc
fqbqrr6 分钟前
2601C++,模块导出分类
前端·c++
倚栏听风雨12 分钟前
vscode 运用 ts 代码需要准备什么
前端
韩曙亮19 分钟前
【Web APIs】浏览器本地存储 ① ( window.sessionStorage 本地存储 | window.localStorage 本地存储 )
服务器·前端·javascript·本地存储·localstorage·sessionstorage·web apis
吃杠碰小鸡22 分钟前
前端Mac快速搭建开发环境
前端·macos
前端大波26 分钟前
使用webpack-bundle-analyzer 对 react 老项目进行打包优化
前端·react.js·webpack·性能优化
Qlittleboy32 分钟前
uniAPP报错:v-for 暂不支持循环数据: (env: Windows,mp,1.06.2307260; lib: 3.12.0)
uni-app
曾帅16832 分钟前
uniapp安卓启动图
android·opencv·uni-app
m0_7408596232 分钟前
解决uniapp折叠面板报错this.collapse.onChange is not a function
uni-app
前端 贾公子33 分钟前
(catalog协议) == pnpm (5)
前端·javascript·react.js