手写笔：目标方形组件项目之间的线条

Question

我尝试在一个由 div 组成的正方形中获取目标手写笔线。

我用for循环试了没成功，因为我理解不了原理

为了说明这个问题，这里是我试图用当前行号为每个项目编号的代码：

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.

现在我用条件 if / else 定位行，但它并不令人满意，因为我想在事先不知道行数的情况下集中我的行 ...

如何进行？

Answer 1

我找到了，很好。这里优化代码：

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

手写笔：目标方形组件项目之间的线条

Stylus: target lines among a square component items

for-loop

stylus