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;
}
相关推荐
n***84071 小时前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
likuolei5 小时前
XSL-FO 软件
java·开发语言·前端·数据库
正一品程序员5 小时前
vue项目引入GoogleMap API进行网格区域圈选
前端·javascript·vue.js
j***89465 小时前
spring-boot-starter和spring-boot-starter-web的关联
前端
star_11125 小时前
Jenkins+nginx部署前端vue项目
前端·vue.js·jenkins
im_AMBER5 小时前
Canvas架构手记 05 鼠标事件监听 | 原生事件封装 | ctx 结构化对象
前端·笔记·学习·架构
JIngJaneIL5 小时前
农产品电商|基于SprinBoot+vue的农产品电商系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·农产品电商系统
Tongfront5 小时前
前端通用submit方法
开发语言·前端·javascript·react
可爱又迷人的反派角色“yang”6 小时前
LVS+Keepalived群集
linux·运维·服务器·前端·nginx·lvs
han_6 小时前
前端高频面试题之CSS篇(二)
前端·css·面试