Stylus: Ziellinien unter einer quadratischen Komponente Elemente

Question

Ich versuche, Zielstift Linien eines Quadrats aus divs zu nehmen.

Ich versuchte erfolglos mit einer for-Schleife, weil ich Probleme habe, das Prinzip zu verstehen.

das Problem zu veranschaulichen, hier ist ein Code, für die ich suche mit der aktuellen Zeilennummer jedes Element an der Nummer:

sqrt(x) 
    return math(x, 'sqrt') 
$n = 100 // Items 
$rn = sqrt($n) 
$length = 1...($n + 1) 
for $i in $length 
    if ($i < ($rn + 1)) 
    $col = '' + L1 + '' 
    else if ($i < (($rn * 2) + 1)) 
    $col = '' + L2 + '' 
    else if ($i < (($rn * 3) + 1)) 
    $col = '' + L3 + '' 
    // etc... 
    else 
    $col = '' + L0 + '' // Feedback 
    screen :nth-child({$i})::after 
    content $col 

Example online.

Vorerst zielen ich die Zeile mit der Bedingung, wenn/sonst, aber es ist nicht zufrieden stellend, weil ich meine Linien konzentrieren möchten, ohne die Anzahl der im Voraus zu wissen ...

Wie gehe ich vor?

Answer 1

Es ist gut, dass ich gefunden habe. Hier optimierten Code:

sqrt(x) 
    return math(x, 'sqrt') 

$n = 100 // Items 
$rn = sqrt($n) 
$length = 1...($n + 1) 

for $i in $length 
    screen :nth-child({$i})::after 
    $col = '' + 'L' + (floor(($i - 1)/$rn) + 1) + '' 
    content $col 

Example online 1

Example online 2