Trying to attach multiple values to SASS map

HTML-CSS
1

Hi, I am trying to refactor my circle animations to a single for loop using sass.
The circle animations have different values, so I try to map multiple values to a key using sass map. I tried using a mixin but failed. Is there a way to map multiple values in sass like a function with different inputs?

here is the circle css i am trying to refactor

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

here is my sass mixin so far

@mixin setCirclePos($start,$end){

     $circleProps : (
         1 : // @mixin circlePos(25%,80px,80px)
         2 : 
         3 : 
         4 : 
         5 : 
         6 : 
         7 : 
         8 : 
         9 : 
         10 : 
     );

    
      @for $index from $start through $end{
         &:nth-child(#{$index}){
            left: map-get($lefts , $index)

         }
      }
  }

@mixin circlePos($left,$width,$height){
      left: $left;
      width:$width;
      height:$height;
  }

is there a way to attach multiple values to a map?

2

this is the closest i could do

  @mixin flex-layout-middle($direction) {
    display: flex;
    flex-direction:$direction;
    justify-content: center;
    align-items: center;
  }

@mixin setCirclePos($start,$end){
      @for $index from $start through $end{
         &:nth-child(#{$index}){
            @include setCircle($index);
         }
      }
  }


@mixin setCircle($index){
    @if($index == 1){
        @include circlePos(25%,80px,80px,0s);
    }@else if($index == 2){
        @include circlePos(10%,20px,20px,2s,12s);
    }@else if($index == 3){
        @include circlePos(70%,20px,20px);
    }@else if($index == 4){
        @include circlePos(40%,60px,60px,0s,18s);
    }@else if($index == 5){
        @include circlePos(65%,20px,20px,0s);
    }@else if($index == 6){
        @include circlePos(75%,110px,110px,3s);
    }@else if($index == 7){
        @include circlePos(35%,150px,150px,7s);
    }@else if($index == 8){
        @include circlePos(50%,25px ,25px ,15s,45s);
    }@else if($index == 9){
        @include circlePos(20%,15px,15px,2s,35s);
    }@else if($index == 10){
        @include circlePos(85%,150px,150px,0s,11s);
    }
}



@mixin circlePos($left,$width,$height,$delay:1s,$animation:2s){
      left: $left;
      width:$width;
      height:$height;
      animation-delay: $delay;
      animation-duration: $animation;
  }
4

thank you so much i wasn’t aware about nested list , i couldn’t find anything on google when i tried to search for attaching multiple values to a map key. This is definately more efficient