How to iterate through a double for loop in Stylus

两盒软妹~` 提交于 2019-12-25 06:28:48

问题


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;
}

回答1:


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)


来源:https://stackoverflow.com/questions/22419626/how-to-iterate-through-a-double-for-loop-in-stylus

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!