如何在Stylus中迭代double for循环

时间:2014-03-15 04:42:50

标签: css node.js stylus

我尝试使用双循环创建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;
}

1 个答案:

答案 0 :(得分:0)

所以,我想这更像是一个计算机科学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)