Как я могу повторить те же элементы CSS?(СКС)

Question

Я хочу ввести новый круг внутри желтого круга и вложить больше кругов.

Я пытался сделать это таким образом, но он просто позволяет мне сделать круг, другой держит его сжатым.

<div>
    <div class="wrapper">
        <div class="circle-container">
            <div class="circle" v-for="i in 30"></div>
        </div>
    </div>
    <div class="wrapper2">
        <div class="circle-container2">
            <div class="circle2" v-for="i in 30"></div>
        </div>
    </div>
</div>

Я использую vuejs для создания цикла.Без vuejs это было бы так:

<div>
    <div class="wrapper">
        <div class="circle-container">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
    <div class="wrapper2">
        <div class="circle-container2">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
</div>

Повторите круг div 30 раз.

CSS

Я использую scss.

 .wrapper2 {
    display: flex;
    width: 100%;
    height: 500px
}

.circle-container2 {
    margin: 8%;
    position: relative;
    width: 100%;
    height: 100%;
}

.circle2 {
    position: absolute;
    top: 50%;
    left: 46%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0.7;
    background: red;
}


.wrapper {
    display: flex;
    width: 100%;
    height: 500px
}

.circle-container {
    margin: 8%;
    position: relative;
    width: 100%;
    height: 100%;
}

.circle {
    position: absolute;
    top: 50%;
    left: 46%;
    width: 60px;
    height: 60px;
    border-radius: 40%;
    opacity: 0.7;
    background: #ffe63d;
}

@for $i from 1 through 30 {
    .circle:nth-child(#{$i}) {
        transform: rotate($i *12deg) translateX(480%);
        @if $i == 1 or $i == 6 or $i == 11 or $i == 16 or $i == 21 or $i == 26 {
            background: orange;
        }
    }
}

@for $j from 1 through 30 {
    .circle2:nth-child(#{$j}) {
        transform: rotate($j * 12 deg) translateX(480%);
        @if $j == 1 or $j == 6 or $j == 11 or $j == 16 or $j == 21 or $j == 26 {
            background: orange;
        }
    }
}

Результат, который я получаю, таков:

Я хочу получить что-то подобное

Answer 1

Я полагаю, что вам не нужно создавать новую оболочку, просто создайте больше .circle. Все будет в порядке.

HTML:

<div>
  <div class="wrapper">
    <div class="circle-container">
      <div class="circle" v-for="i in 120"></div>
    </div>
  </div>
</div>

SCSS:

 .wrapper {
   display: flex;
   width: 100%;
   height: 500px
 }

 .circle-container {
   margin: 8%;
   position: relative;
   width: 100%;
   height: 100%;
 }

 .circle {
   position: absolute;
   top: 50%;
   left: 46%;
   width: 60px;
   height: 60px;
   border-radius: 40%;
   opacity: 0.7;
   background: #ffe63d;

   &:nth-child(5n+1) {
     background: orange;
   }
 }

 @for $i from 1 through 120 {
   .circle:nth-child(#{$i}) {
     @if $i>90 {
       transform: rotate($i*12deg) translateX(480%);
     }
     @elseif $i>60 {
       transform: rotate($i*12deg) translateX(390%) scale(0.8);
     }
     @elseif $i>30 {
       transform: rotate($i*12deg) translateX(315%) scale(0.7);
     }
     @else {
       transform: rotate($i*12deg) translateX(252%) scale(0.55);
     }
   }
 }

Пример в JSFiddle: https://jsfiddle.net/5oh1m40x/