我正在尝试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] 删除。
我来说两句