Making loop in CSS Stylus more efficient

Question

I'm not sure if this could be more efficient because I don't think I should need 2 keyframe loops in addition to the for loop?

for i in (1..19)
.l:nth-child({i}) 
n = (20 - i) 
height 0
if i >= 10
 margin-left ((n * n) * (1.25/n)) + 17 px 
 box-shadow 0px 0px (n+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
 width (n * 1.05) + 0px
 animation (heights- + i) 0.75s (n/80)s linear forwards
else 
 margin-left ((i * i) * (1.25/i)) + 17 px 
 box-shadow 0px 0px (i+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
 width (i * 1.05) + 0px 
 animation (heightsx- + i) 0.75s (i/80)s linear forwards
for i in (10..19)
n = (20 - i)
$keyframe-name = (heights- + i)
@keyframes {$keyframe-name} 
 0% 
 height 0
 91% 
 height ((n + 4) * 1.4) px
 98% 
 height ((i + 38) * 5.4) px
 100%
 height ((n + 38) * 4.4) px
 opacity (n/6)
 if i == 10 
 height ((i + 43) * 4.4) px
 opacity (i/6)
for i in (1..9)
$keyframe-namex = (heightsx- + i)
@keyframes {$keyframe-namex} 
 0% 
 height 0
 91% 
 height ((i + 4) * 1.4) px
 98% 
 height ((i + 38) * 5.4) px
 100%
 height ((i + 38) * 4.4) px
 opacity (i/16) 

• cimmanon: You might stir up a little more interest if you provide a link to a demo on something like sassmeister.com. I couldn't get the one on the Stylus site to work with pasted code.
• Malachi: We would love to have you as a regular Code Review user, please update your username and join us in The Second Monitor
• Malachi: does the answer below satisfy your question? the amount of the bounty that is awarded is greater if you award it manually than if you let it automatically award.

Answer 1

Based on what I can tell of these three loops is that they are not nested, which means that you are running one loop for the whole range of 1-19 another loop for the range of 1-9 (which you already went over once) and another loop for the range of 10-19 which you have already looped over as well. and the first loop that goes over the entire range already divides the top half from the bottom half to change other things, I may be looking at this all wrong, but I put the last two loops inside the first loops if-then statements and came up with this

for i in (1..19)
 .l:nth-child({i}) 
 n = (20 - i) 
 height 0
 if i >= 10
 margin-left ((n * n) * (1.25/n)) + 17 px 
 box-shadow 0px 0px (n+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
 width (n * 1.05) + 0px
 animation (heights- + i) 0.75s (n/80)s linear forwards
 $keyframe-name = (heights- + i)
 @keyframes {$keyframe-name} 
 0% 
 height 0
 91% 
 height ((n + 4) * 1.4) px
 98% 
 height ((i + 38) * 5.4) px
 100%
 height ((n + 38) * 4.4) px
 opacity (n/6)
 if i == 10 
 height ((i + 43) * 4.4) px
 opacity (i/6)
 else 
 margin-left ((i * i) * (1.25/i)) + 17 px 
 box-shadow 0px 0px (i+4)px 0 rgba(40,70,200, 0.5),0px 0px (i+8)px 0 rgba(80,100,235, 0.45),0px 0px 14px 0 rgba(115,215,235, 0.35),0px 0px 23px 0 rgba(110,130,215, 0.5)
 width (i * 1.05) + 0px 
 animation (heightsx- + i) 0.75s (i/80)s linear forwards
 $keyframe-namex = (heightsx- + i)
 @keyframes {$keyframe-namex} 
 0% 
 height 0
 91% 
 height ((i + 4) * 1.4) px
 98% 
 height ((i + 38) * 5.4) px
 100%
 height ((i + 38) * 4.4) px
 opacity (i/16) 

I agree with @Cimmanon in that you would get more answers to this question if we had somewhere that we could run the code and tinker with it a little bit. I assume that you would have done it this way to begin with unless there was another reason for doing it this way.

---

I also moved some variables around to merge them and use them in other expressions.

like

 animation (heights- + i) 0.75s (n/80)s linear forwards
 $keyframe-name = (heights- + i)
 @keyframes {$keyframe-name} 
 0% 
 height 0
 91% 
 height ((n + 4) * 1.4) px
 98% 
 height ((i + 38) * 5.4) px
 100%
 height ((n + 38) * 4.4) px
 opacity (n/6)
 if i == 10 
 height ((i + 43) * 4.4) px
 opacity (i/6)

you create $keyframe-name to hold the value heights- + i when you could have just put that expression into @keyframes{heights- + i}, but since we merged the two for loops into one we can use $keyframe-name like this

$keyframe-name = (heights- + i)
animation ($keyframe-name) 0.75s (n/80)s linear forwards
@keyframes {$keyframe-name} 
 0% 
 height 0
 91% 
 height ((n + 4) * 1.4) px
 98% 
 height ((i + 38) * 5.4) px
 100%
 height ((n + 38) * 4.4) px
 opacity (n/6)
 if i == 10 
 height ((i + 43) * 4.4) px
 opacity (i/6)

and do the same thing inside the else statement

$keyframe-namex = (heightsx- + i)
animation ($keyframe-namex) 0.75s (i/80)s linear forwards
@keyframes {$keyframe-namex} 
 0% 
 height 0
 91% 
 height ((i + 4) * 1.4) px
 98% 
 height ((i + 38) * 5.4) px
 100%
 height ((i + 38) * 4.4) px
 opacity (i/16)