Search code examples
for-loopcompass-sass

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


Solution

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