如何重复相同的CSS元素？ （scss）

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/