Question

我正在尝试使用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帮助我

Answer 1

嘿，我会试一试：

这是你想要的吗？ 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;
}

Answer 2

这是for

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

指南针@for和迭代

2 个答案: