项目中scss提取可复用mixin函数
提取公共样式base,mixin的使用
定义minxi.scss文件
//flex布局复用
@mixin flex($hov:space-between,$col:center) {
display: flex;
justify-content: $hov;
align-items: $col;
}
@mixin bgImg($w:0,$h:0,$img:'',$size:contain) {
display: inline-block;
width: $w;
height: $h;
background: url($img) no-repeat center;
background-size: $size;
// margin-right: 4px;
}
使用方式:
@import "./../assets/mixin.scss"; @include flex(); @include bgImg(16px,12px,"/imgs/icon-cart-checked.png");
好处:针对大型项目提取复用性组件可以方便日后开发的维护和迭代。但是也需要有人对文件进行维护。
集思广益,仅供学习,侵权即删!!

浙公网安备 33010602011771号