scss同时使用两个数组

<div class="content">
   <div v-for="(item,index) in 5" :key="index" :class="`box box${index}`"></div>
</div>

<style lang='scss' scoped>
.content{
  position: relative;
}
.box{
  position: absolute;
  width: 50px;
  height: 50px;
}
$color: red,green,blue,yellow,pink;
$top: '0px' '50px' '100px' '150px' '200px';
$left: '0px','50px','100px','150px','200px';
//    遍历一个数组
@each $c in $color{
  $i:index($color,$c);
  .box#{$i - 1}{
    background: nth($color,$i);;
  }
}
//    同时使用两个数组
@for $i from 1 to length($top) + 1 {
  .box#{$i - 1}{
    top: #{nth($top, $i)};
    left: #{nth($left, $i)};
  }
}
</style>

 

转载于:https://www.cnblogs.com/223zzm/p/11335310.html