Simplify CSS with Sass ( making circle with small circles in css ) -

Simplify CSS with Sass ( making circle with small circles in css ) -

i'm trying create animation. 8 little circle create big circle. css code on how placed circles. there way simplify css sass ( mixin, loops, or functions ) ?

span:nth-child(1) { margin-top: -100px; } span:nth-child(2) { margin-top: -70px; margin-left: 70px; } span:nth-child(3) { margin-left: 100px; } span:nth-child(4) { margin-top: 70px; margin-left: 70px; } span:nth-child(5) { margin-top: 100px; } span:nth-child(6) { margin-top: 70px; margin-left: -70px; } span:nth-child(7) { margin-left: -100px; } span:nth-child(8) { margin-top: -70px; margin-left: -70px; }

you can utilize @for loop:

$steps: -100px, -70px, 0, 70px, 100px, 70px, 0, -70px; @for $n 1 through 8 { span:nth-child(#{$n}) { margin-top: nth($steps, $n); margin-left: nth($steps, ($n + 1) % 8 + 1); // explained in comments } } update: using trigonometry

you may utilize trigonometry calculate top , left values exactly based on value of $n (you can find trig functions in number of sass extensions, such compass, or google details on rolling own), create cleaner code.

if have access pi, sin , cos functions (such using compass), can calculate precise values positions around circle based on $n:

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

the * pi() / 4 converts our $n values of 1..2..3.. pi/4..pi/2..3pi/4.. radian equivalents of 45 degrees..90 degrees..135 degrees.. need.

update 2: flexible number of little circles

made more flexible – no longer limited 8 little circles:

$number-of-circles: 13; @for $n 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 radian equivalent of 360 degrees. split number of circles (which gives angle, in radians, between each circle), , multiply $n radian angle value each circle.

working demo: http://codepen.io/anon/pen/grffd

css sass