手写笔：方形组件项

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