CODEWITHSUNDEEP
htmlcsssass
Jhon Donald
Jhon Donald

Reputation: 59

SCSS for loop issue

I am trying to make a for loop in SCSS to move some circles for test purposes, but what I am trying to do is make a line outside each circle.

HTML:

<div class="container">
    <div class="circle"> 
        <div class="line"></div>
    </div>
    <div class="circle"> 
        <div class="line"></div>
    </div>
    <div class="circle"> 
        <div class="line"></div>
    </div>
    <div class="circle"> 
        <div class="line"></div>
    </div>
    <div class="circle"> 
        <div class="line"></div>
    </div>
    <div class="circle"> 
        <div class="line"></div>
    </div>
</div>

SCSS:

$radius : 300px;
$num-elements: 6;
$angel: 360/$num-elements;
$circle-size: $radius/10;
$rot : 0;
$c-radius:100;

*{
  margin: 0;
  padding: 0;
  
}
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  width: $radius;
  height: $radius;
  background: rgb(14, 122, 155);
  border-radius: 50%;
}

.container .circle{
  width: $circle-size;
  height: $circle-size;
  background-color: orange;
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -($circle-size/2);
  z-index: 1;
}
.container .circle .line{
  width: 30px;
  height: 60px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 40%;
  margin: -($circle-size/2);
  z-index: 1;
}
@for $i from 1 through $num-elements{
  .container .circle:nth-child(#{$i}){
      transform: rotate($rot * 1deg ) translate($radius / 1.7) rotate($rot * -1deg);
  }
  .container .circle .line:nth-child(#{$i}){
    transform: rotate($rot * 1deg ) translate($radius / 1.7) rotate($rot * -1deg);
}
  $rot : $rot + $angel ;
}

The circle is centered great but the issue with the lines when I inspect in Google Chrome it seems it only selects the first element but it doesn't select the line and loop over it.

Upvotes: 1

Views: 230

Answers (2)

Dan Knights
Dan Knights

Reputation: 8368

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

.line:nth-child(#{$i}) can only select .line with an index of (1) as it's the only child of each .circle.

If you nest .line inside .circle instead, it will select each one:

@for $i from 1 through $num-elements {
  .container .circle:nth-child(#{$i}) {
      transform: rotate($rot * 1deg) translate($radius / 1.7) rotate($rot * -1deg);
      
      .line {
          transform: rotate($rot * 1deg) translate($radius / 1.7) rotate($rot * -1deg);
      }
  }

  $rot: $rot + $angel;
}

Upvotes: 1

Consti P
Consti P

Reputation: 465

Your issue seems to be with your selectors. You want .container .circle:nth-child(#{$i}) .line instead of .container .circle .line:nth-child(#{$i}).

You are currently telling all circles, that their first, second, ... lines need to be styled, when in reality you want to style the lines of the first, second, ... circle.

Also scss allows nesting. This might help you:

$radius : 300px;
$num-elements: 6;
$angel: 360/$num-elements;
$circle-size: $radius/10;
$rot : 0;
$c-radius:100;

* {
  margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  width: $radius;
  height: $radius;
  background: rgb(14, 122, 155);
  border-radius: 50%;

  .circle {
    width: $circle-size;
    height: $circle-size;
    background-color: orange;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin: -($circle-size/2);
    z-index: 1;

    .line {
      width: 30px;
      height: 60px;
      background-color: red;
      position: absolute;
      left: 50%;
      top: 40%;
      margin: -($circle-size/2);
      z-index: 1;
    }

    @for $i from 1 through $num-elements {
      &:nth-child(#{$i}) {
        transform: rotate($rot * 1deg ) translate($radius / 1.7) rotate($rot * -1deg);

        .line {
          transform: rotate($rot * 1deg ) translate($radius / 1.7) rotate($rot * -1deg);
        }
      }
      $rot: $rot + $angel;
    }
  }
}

Upvotes: 1

Related Questions