如何遍历Stylus中的double for循环 [英] How to iterate through a double for loop in Stylus

问题描述

我试图使用一个double for循环来创建16个css选择器，通过网格中的每一个移动一个 background-position 。我有后台位置打印正确，但我可以得到类吐出1-16。在下面的示例中， index 将被正确的解决方案替换。

我尝试创建一个变量，每次通过循环，但它返回并且错误。

  for row in 1 2 3 4 
 for col 1 2 3 4 
 li.item {index} 
 background-position（（（row -1）* 130 +（（row -1）* 2））* -1px） 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; 
} 
  

解决方案

更多的计算机科学101问题，但我想出来了。

  for row in 1 2 3 4 
 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）
  / pre> 
I'm trying to use a double for loop to create 16 css selectors that shift a background-position through each one in a grid. I have the background-position printing correctly, but I can get the class to spit out 1-16. In the example below, index would be replace by the correct solution.

I tried creating a variable and adding one each time through the loop, but it returns and error.
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)
so that you get
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;
}

解决方案
So, I guess this is more of a Computer Science 101 question, but I figured it out.
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循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！