CODEWITHSUNDEEP
csssass
kevinjoel
kevinjoel

Reputation: 63

How can I repeat the same CSS elements? (scss)

I want to introduce a new circle inside the yellow circle and nest more circles.

I tried to do it this way, but it just lets me make a circle the other keeps it compressed.

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

I use vuejs to make loop. Without vuejs it would be like this

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

Repeat div circle 30 times.

CSS

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

The result that I get is this:

Screen Shot

I want to get something like that

enter image description here

Upvotes: 1

Views: 679

Answers (1)

daroldev
daroldev

Reputation: 131

I figure that you don't have to create new wrapper, just create more .circle would be fine.

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

Example in JSFiddle: https://jsfiddle.net/5oh1m40x/

Upvotes: 2

Related Questions