I've finally written my first loop in SCSS, trying to avoid it for quite some time since I thought it was unnecessary (was writing vanilla CSS not so long ago, so I was used to manual work).However, I feel this code isn't very optimized, especially since I seem to need two different while-loops (one for divs from center to left, and one for divs to the right).Demo is available at http://codepen.io/pestbarn/pen/myqvEqThe loopsI found myself needing an @if condition for tweaking the margin for the center div by just 1vh.// generate 6 circles from center to left$i: 6;$s: 38;$t: -19;$l: -90;$z: 2;@while $i > 0 {  &:nth-child(#{$i}) {    @include sqsize($s);    margin-top: $t+vh;    margin-left: $l+vh;    z-index: $z;  }  $i: $i - 1;  $s: $s - 2;  $t: $t + 1;  @if $l == -30 {    $l: $l + 16  } @else {    $l: $l + 15;  }  $z: $z + 1;}// generate 5 circles to the right$i: 11;$s: 38;$t: -19;$l: 52;$z: 2;@while $i > 6 {  &:nth-child(#{$i}) {    @include sqsize($s);    margin-top: $t+vh;    margin-left: $l+vh;    z-index: $z;  }  $i: $i - 1;  $s: $s - 2;  $t: $t + 1;  $l: $l - 13;  $z: $z + 1;}Is there perhaps a way of only needing to write one while-loop for this? From left to right, the div sizes (where 1 is smallest and 6 is largest) go 6 5 4 3 2 1 2 3 4 5 6, in that order.
While loops in SCSS to produce circles for an animation
beginner;iteration;sass
I ended up rewriting it like this - much more compact and clean. If there are further ways to optimize this, I'm open to suggestions!// generate circles from left to right$i: 1; $s: 38; $t: -19; $l: -89.3; $z: 2;@while $i <= 11 {    &:nth-child(#{$i}) {         @include sqsize($s);        margin-top: $t+vh;        margin-left: $l+vh;        z-index: $z;    }    $i: $i + 1;    $z: $z + 1;    $b: $i <= 6;    $l: if($b, $l + 15, $l + 13);        // <= 6 - circles are coming from the left        // > 6 - circles are going to the right    $s: if($b, $s - 2, $s + 2);        // same logic as above - decrease size towards middle        // and increase size after passing the middle    $t: if($b, $t + 1, $t - 1);        // }