uniapp使用SCSS混入封装flex布局从此一行搞定flex

-5044

已于 2023-04-26 13:33:48 修改

阅读量1k

点赞数 2

文章标签： scss 前端 vue.js

于 2023-03-24 17:55:32 首次发布

本文链接：https://blog.csdn.net/weixin_46448762/article/details/129755775

版权

文章介绍了如何在SCSS中定义一个名为`flex`的mixin，该mixin用于处理flex容器的方向、对齐方式等属性。通过这个mixin，开发者可以更方便地在项目中应用Flexbox布局，减少了代码重复并提高了代码可维护性。

摘要由CSDN通过智能技术生成

首先定义demo.scss


$flex-params: (
	x: row,
	y: column,
	start: flex-start,
	center: center,
	around: space-around,
	between: space-between,
);

@mixin flex($coor:null, $justify:null, $alignItems:null) {
	display: flex;
	@if $coor {
		flex-direction: map-get($flex-params, $coor);
	}
	@if $justify {
		justify-content: map-get($flex-params, $justify);
	}
	@if $alignItems {
		align-items: map-get($flex-params, $alignItems);
	}
}

将上面的scss文件导入到app.vue中

最后就可以直接在全局的样式中使用了

举例

// 未使用混入
#container{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
}
#container{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
}

// 使用
#container{
    @include flex(x,start,center)
}
#container{
    @include flex(y,start,center)
}