项目中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");

  好处:针对大型项目提取复用性组件可以方便日后开发的维护和迭代。但是也需要有人对文件进行维护。

posted @ 2020-09-29 00:10  胡炖鱼  阅读(674)  评论(0编辑  收藏  举报