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;
}
相关推荐
m0_748229995 分钟前
Vue3高效学习路线全攻略
前端·javascript·vue.js
谢尔登17 分钟前
React架构演变
前端·react.js·架构
木辰風21 分钟前
vue在IE浏览器下父页面向子页面传输对象时数据丢失
前端·javascript·html
小雨青年29 分钟前
Cursor 项目实战:AI播客策划助手(四)—— 产品发布与交付收尾
前端·人工智能
晚霞的不甘1 小时前
Flutter for OpenHarmony《淘淘购物》主页点击跳转功能详解:从 UI 响应到页面导航的完整实现
前端·flutter·ui·搜索引擎·前端框架·交互
cooldream20091 小时前
前端技术架构详解:Vue 3 + TypeScript + Vite 在具身 AI 系统中的实践
前端·架构·typescript
迟_1 小时前
CSS-实现图片靠右
前端·css
weixin_395448911 小时前
下位机&yolov11输出
java·服务器·前端
秋秋秋秋秋雨1 小时前
基于若依的vue3+springboot3基础架构项目,前端优化
前端
Dragon Wu1 小时前
Web前端 认证token的安全存储策略
前端·javascript·安全·react.js·前端框架