CODEWITHSUNDEEP
cssless
zmanc
zmanc

Reputation: 5409

Nesting and looping with less incremental

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

Upvotes: 1

Views: 552

Answers (2)

seven-phases-max
seven-phases-max

Reputation: 11820

See Loops, e.g.:

.make-nested-lists(5);

.make-nested-lists(@n, @i: 0) when (@i < @n) {
    ul li {
        padding-left: (30px + 15 * @i);
        .make-nested-lists(@n, (@i + 1));
    }
}

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

this should be enough

ul {
  li{
    padding-left: 30px; /* base value */

    li{
      padding-left: 15px;  /* increment */
    }
  }
}

the first list-item has 30px of left padding, then since <li>'s are nested they inherit the padding of ancestor items. So the child has 30 + 15 = 45px of left padding, the grandchild 60px and so on.

Example on codepen: http://codepen.io/anon/pen/uGxHy/

Screenshot

enter image description here

Upvotes: 4

Related Questions