提取公共样式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; $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");
好处:针对大型项目提取复用性组件可以方便日后开发的维护和迭代。但是也需要有人对文件进行维护。