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;
}
相关推荐
字节架构前端10 分钟前
媒体采集标准草案 与 Chromium 音频采集实现简介
前端·chrome·音视频开发
奋斗的小青年!!11 分钟前
Flutter在OpenHarmony上实现渐变文字动画的深度优化实践
前端·flutter·harmonyos·鸿蒙
梦65014 分钟前
Vue3 计算属性 (computed) 与监听属性 (watch)
前端·javascript·vue.js
Front思28 分钟前
uniapp解决点击穿透问题总结
uni-app
六月June June29 分钟前
leaflet L.popup().setContent中挂载vue组件
前端·javascript·vue.js
首席拯救HMI官32 分钟前
【拯救HMI】HMI容错设计:如何减少操作失误并快速纠错?
大数据·运维·前端·javascript·网络·学习
m0_7482546638 分钟前
Vue.js 模板语法基础
前端·vue.js·flutter
PBitW1 小时前
和AI浅聊了一下SEO —— 真神Astro
前端·seo
胆大如牛白展堂1 小时前
自动刷新token登录
前端·设计模式
Charon_super1 小时前
html语法笔记
前端·笔记·html