Question

我尝试使用双循环创建16个css选择器，将background-position移动到网格中的每个选择器。我正确地进行了背景位置打印，但我可以让class吐出1-16。在下面的示例中，index将替换为正确的解决方案。

我尝试创建一个变量并在循环中每次添加一个变量，但它返回并出错。

for row in 1 2 3 4
  for col in 1 2 3 4
    li.item{index}
      background-position (((row - 1) * 130 + ((row - 1) * 2)) * -1px) (((col - 1) * 130 + ((col - 1) * 2)) * -1px)

这样你就得到了

li.item1 {
  background-position:0 0;
}
li.item2 {
  background-position:0 -132px;
}
li.item3 {
  background-position:0 -264px;
}
li.item4 {
  background-position:0 -396px;
}
li.item5 {
  background-position:-132px 0;
}
...
li.item16 {
  background-position:-396px -396px;
}

Answer 1

所以，我想这更像是一个计算机科学101问题，但我想出来了。

for row in 1 2 3 4
    for col in 1 2 3 4
        index = ((row - 1) * 4) + col
        li.item{index}
            background-position (((row - 1) * 130 + ((row - 1) * 2)) * -1px) (((col - 1) * 130 + ((col - 1) * 2)) * -1px)

如何在Stylus中迭代double for循环

1 个答案: