指南針@for和迭代

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級。

感謝名單，以幫助我

Answer 1

這裏是爲

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

Answer 2

嘿，我這會給出一個嘗試：

難道這樣的事情你想要什麼？ 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; 
}