五四、sass中函数使用

项目需求

• 实现头像依次叠加
  

HTML

• <div class='show_img'>
<img v-for="item in [1,2,3,4,5,6,7,8]" ref='headImg' src="../../static/image/09.jpg" alt="">
</div>

SASS

• .show_img {
margin-top: .14rem;
position: relative;
img {
width: .6rem;
height: .6rem;
border-radius: 50%;
}
$width:(0.6rem);
@mixin left($width,$n){
position: absolute;
left:($width*$n)-(0.08*$n)-$width;
}
@for $i from 1 through 8{
img:nth-child(#{$i}){
@include left($width,$i);
z-index: #{$i};
}
}
}

最终效果