scss同时使用两个数组

Posted 2022-07-01 223zzm

<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>