For loop 罗盘@for和迭代

我正在尝试制作一个包含4个子级别的菜单。我想使用@for方法

我想要

nav ul > li {....}
nav ul > li  ul > li {....}
nav ul > li  ul > li  ul > li {....}
nav ul > li  ul > li  ul > li ul > li {....}

然后我试着

 nav {
    @for $i from 0 through 3 {
        & ul {
            & li {
                padding-left: 20px*$i;
            }
        }
    }
 }   

结果是我只有1级

---

Thanx要帮我

嘿，我要试试这个：

你想要这样的东西吗？ sass代码：

$selectors: "& ul > li", "& ul > li ul > li","& ul > li ul > li ul > li","& ul > li ul > li ul > li  ul > li"

nav
  @each $i in $selectors
    #{$i}
      padding-left: 200px

输出：

/* line 5, style.sass */
nav ul > li {
  padding-left: 200px;
}
/* line 5, style.sass */
nav ul > li ul > li {
  padding-left: 200px;
}
/* line 5, style.sass */
nav ul > li ul > li ul > li {
  padding-left: 200px;
}
/* line 5, style.sass */
nav ul > li ul > li ul > li ul > li {
  padding-left: 200px;
}

这是给你的建议

$selectors: ('& ul > li', '& ul > li ul > li', '& ul > li ul > li ul > li', '& ul > li ul > li ul > li  ul > li')

nav
  @for $i from 1 through 4
    #{nth($selectors, $i)}
      padding-left: 200px * $i

吐出同样的

/* line 5, style.sass */
nav ul > li {
  padding-left: 200px;
}
/* line 5, style.sass */
nav ul > li ul > li {
  padding-left: 400px;
}
/* line 5, style.sass */
nav ul > li ul > li ul > li {
  padding-left: 600px;
}
/* line 5, style.sass */
nav ul > li ul > li ul > li ul > li {
  padding-left: 800px;
}