SCSS for循环问题

琼·唐纳德

我正在尝试for在SCSS中进行循环以移动一些圆圈以进行测试,但是我想要做的是在每个圆圈之外绘制一条直线。

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

圆圈居中很大,但是当我在Google Chrome浏览器中检查线条时,线条问题似乎只选择了第一个元素,却没有选择线条并在其上循环。

孔斯蒂

您的问题似乎与选择器有关。您要.container .circle:nth-child(#{$i}) .line代替.container .circle .line:nth-child(#{$i})

您当前正在告诉所有圆,需要对它们的第一,第二,...线进行样式设置,而实际上您要对第一,第二,...圆的线进行样式设置。

另外,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%;

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章