I'm trying to do a menu with 4 sub levels. I'd like to use a @for method.
I want to have
nav ul > li {....}
nav ul > li ul > li {....}
nav ul > li ul > li ul > li {....}
nav ul > li ul > li ul > li ul > li {....}
Then i tried
nav {
@for $i from 0 through 3 {
& ul {
& li {
padding-left: 20px*$i;
}
}
}
}
The result is I only have 1 level.
Thanx to help me
And here is the 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
spits out the same
/* 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;
}