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进行调用—复用的样式