vue其他scss预处理之“复用mixin”

1.创建mixin.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;
  background: url($img)no-repeat center;
  background-size:$size;
  width: $w;
  height: $h;
  margin-right: 4px;
}

//水平垂直居中
@mixin hov_col($top:0,$right:0,$bottom:0,$left:0){
  position: absolute;
  top: $top;
  bottom: $bottom;
  right: $right;
  left: $left;
  margin: auto;
}

@mixin position($pos,$top,$left,$w,$h){
 position: $pos;
  top:$top;
  left:$left;
  width: $w;
  height:$h;
}


@mixin positionImg($pos:absolute,$top:0,$right:0,$w:0,$h:0,$img:''){
  position:$pos;
  top:$top;
  right: $right;
  width: $w;
  height: $h;
  background: url($img)no-repeat center;
  background-size:contain;


}

2.在组件中使用的时候先，导入

3.然后，使用@include xx进行调用—复用的样式