Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Nesting and looping with less incremental

Nesting and looping with less incremental

Problem

I am not sure how to implement this in less, not sure where to start.

The purpose is to increment the padding by a variable(15px in this example) to a depth (increment variable). Is this possible in less?

ul {
  li{
    padding-left: 30px;
  }
  ul {
    li{
      padding-left: 45px;
    }
    ul {
      li{
        padding-left: 60px;
      }
      ul {
        li{
          padding-left: 75px;
        }
        ul {
          li{
            padding-left: 90px;
          }
        }
      }
    }
  }
}
Problem courtesy of: zmanc

Solution

See Loops, e.g.:

.make-nested-lists(5);

.make-nested-lists(@n, @i: 0) when (@i 
Solution courtesy of: seven-phases-max

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Nesting and looping with less incremental

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×