用Sass简化CSS（用CSS中的小圆制作圆）

我想做些动画。我用8个小圆圈做一个大圆圈。这是关于如何放置圆圈的css代码。有没有一种方法可以用Sass（mixin、loops或functions）简化这个css

---

您可以使用

@for

循环：

$steps: -100px, -70px, 0, 70px, 100px, 70px, 0, -70px;

@for $n from 1 through 8 {
  span:nth-child(#{$n}) {
    margin-top: nth($steps, $n);
    margin-left: nth($steps, ($n + 1) % 8 + 1); // This is explained in the comments
  }
}

更新：使用三角法 您很可能喜欢使用三角法，根据

$n

的值精确计算

顶部

和

左侧

的值（您可以在许多Sass扩展中找到trig函数，如Compass，或谷歌，以获取有关滚动的详细信息），这将有助于代码更清晰

如果您可以访问

pi

、

sin

和

cos

功能（例如使用指南针），则可以基于

$n

计算圆周围位置的精确值：

@for $n from 1 through 8 {
  span:nth-child(#{$n}) {
    margin-top: 100px * sin($n * pi() / 4);
    margin-left: 100px * cos($n * pi() / 4);
  }
}

*pi（）/4

转换

1

的

$n

值。

2

。

3

。。到

PI/4

。

PI/2

。

3PI/4

。。它们是

45度

。

90度

。

135度

。。这正是我们需要的

更新2：小圆圈的灵活数量 使其更加灵活–不再限于8个小圆圈：

$number-of-circles: 13;

@for $n from 1 through $number-of-circles {
  span:nth-child(#{$n}) {
    $angle-in-radians: $n * (pi() * 2 / $number-of-circles);
    margin-top: 100px * sin($angle-in-radians);
    margin-left: 100px * cos($angle-in-radians);
  }
}

pi（）*2

是相当于360度的弧度。我们将其除以圆的数量（以弧度表示每个圆之间的角度），然后将其乘以

$n

，得到每个圆的弧度角值

---

工作演示：

它工作：）。多谢各位@Shai你能给我解释一下左边距吗？@SalmenBejaoui左边距使用

（$n+1）

而不是

$n

，以使左边距在

$steps

数组的顶部距前一位（因此，

顶部/左侧

将是

-100/-70

，然后是

-70/0

，等等，而不是

-100/-100

，然后是

-70/-70

，这将给出一条对角线而不是一个圆）%8+1只是回到

$steps

的开头：我们不是从

$steps

（不存在）获取第9个值，而是回到第1个值。谷歌“模运算”了解更多细节。这有帮助吗？非常感谢，我理解。@SalmenBejaoui没问题。还更新为使用三角法，允许精确定位任意数量的小圆（不仅仅是8个）

$number-of-circles: 13;

@for $n from 1 through $number-of-circles {
  span:nth-child(#{$n}) {
    $angle-in-radians: $n * (pi() * 2 / $number-of-circles);
    margin-top: 100px * sin($angle-in-radians);
    margin-left: 100px * cos($angle-in-radians);
  }
}