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

首先定义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)
}