解决flex gap兼容性问题
媒介一个项目写下来，在网页端预览的时候正常，效果到产品经理手上。
计划稿样式
https://img-blog.csdnimg.cn/15cf3fbb8ca643feac261dd4fa8d20bc.jpeg#pic_center
实际产品手机上样式
https://img-blog.csdnimg.cn/2e43fbca27b34a9ebc97e7d4a8f34580.jpeg#pic_center
产品：“你这玩意儿怎么没间距？”
我：“为什么我的正常？？？呐呐呐你看我手机（来自RedmeK50Utral）”
产品：“哦，你看我的手机（来自荣耀20）”
我：“。。。”
至此我看了看我代码中的一堆gap，再看了看她那还不退休的老安卓，陷入了沉思！
解决办法
我的想法就是通过子元素设置右边和下边的间距，父元素设置划一值的，同方向的负magin值来实现gap同样的效果。
// xxxx.scss
.xxxxActions {
display: flex;
margin-right:-12px;
margin-bottom:-12px;
.xxxaa {
margin-right:12px;
margin-bottom:12px;
}
}
你以为这样就结束了吗？漏！并不是这样的。每个文件中都这么写不累吗？作为一个懒鬼，我是非常不屑于这么写，不敷优雅。
sass mixin用法
写过vue2的肯定都知道，mixin是个什么东西，sass同理
某观众：“这这这我熟啊！”
mixin简朴来说，就是把一些共用的东西，给塞进来，mixin的英文翻译过来是混入的意思。就比如你是奶茶店的员工，你在做奶茶，每杯奶茶都必要加糖吧！但其他东西都不一样，这时候就可以把果糖封装起来，然后mixin混入一下，混到奶茶里，这杯奶茶就成了。是不是非常好明白
封装mixin
@mixin gap($size) {
margin-bottom: calc(0px - $size);
margin-right: calc(0px - $size);
& > * {
margin-right: $size;
margin-bottom: $size;
}
}
使用mixin
这里以vue cli5+webpack5实例，其他同理。uniapp中直接在uni.scss中写mixin，不必要多余设置
第一步：在vue.config.js中设置，webpack4把additionalData换成data就行
module.exports = defineConfig({
css: {
loaderOptions: {
sass: {
additionalData: `
@import "@/assets/css/mixin.scss";
`
}
},
},
})
这一步的设置作用是自动在每个scss文件中引入mixin.scss，这样才能访问到mixin函数
第二步：使用
.basicBottomActions {
display: flex;
@include gap(10px);
}
总结
以上就达到了gap同样的效果，并且保持了精良的兼容性。妈妈再也不怕兼容性不好的手机用不了gap啦！总之不管用的什么打包工具，vite也要webpack也好，原理是一样的。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]