CODEWITHSUNDEEP
for-loopcompass-sass
Lolo
Lolo

Reputation: 537

Compass @for and iteration

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

Upvotes: 0

Views: 205

Answers (2)

Robbie Bardijn
Robbie Bardijn

Reputation: 477

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

Upvotes: 1

Robbie Bardijn
Robbie Bardijn

Reputation: 477

Hey I will give this a try:

Is it something like this you want? sass code:

$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

output:

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

Upvotes: 1

Related Questions