嵌套和循环使用较少的增量

Question

我不知道如何更少地实现这一点，不知道从哪里开始。

目的是通过变量（在本例中为15px）将填充增加到深度（增量变量）。这可能会少吗？

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

Answer 1

这应该够了

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

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

第一个列表项具有左边填充的30px，然后由于嵌套了<li>，它们会继承祖先项目的填充。所以孩子有30 + 15 = 45px左边填充，孙子60px等等。

关于codepen的示例：http://codepen.io/anon/pen/uGxHy/

---

截图

Answer 2

见Loops，例如：

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