Trying to attach multiple values to SASS map

Trying to attach multiple values to SASS map
0

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?

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


@Balancedsan

Would something like the following work using nested list?

$circles : (
  (25%,80px,80px,0s),
  (10%,20px,20px,2s,12s),
  (70%,20px,20px),
  (40%,60px,60px,0s,18s),
  (65%,20px,20px,0s),
  (75%,110px,110px,3s),
  (35%,150px,150px,7s),
  (50%,25px ,25px ,15s,45s),
  (20%,15px,15px,2s,35s),
  (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;
}

.circles li {
    @for $index from 1 through length($circles) {
    &:nth-child(#{$index}) {
      @include circlePos(nth($circles, $index)...);
    }
  }
}

Or you could use a map as you originally wanted:

$circles : (
  1: (25%,80px,80px,0s),
  2: (10%,20px,20px,2s,12s),
  3: (70%,20px,20px),
  4: (40%,60px,60px,0s,18s),
  5: (65%,20px,20px,0s),
  6: (75%,110px,110px,3s),
  7: (35%,150px,150px,7s),
  8: (50%,25px ,25px ,15s,45s),
  9: (20%,15px,15px,2s,35s),
  10: (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;
}

.circles li {
  @each $index, $circleValues in $circles {
    &:nth-child(#{$index}) {
      @include circlePos($circleValues...);
    }
  }
}

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