嵌套和循环，增量更少答案

【问题标题】：Nesting and looping with less incremental嵌套和循环，增量更少
【发布时间】：2014-03-25 04:52:20
【问题描述】：

我不知道如何在 less 中实现这一点，不知道从哪里开始。

目的是通过一个变量（在本例中为 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;
          }
        }
      }
    }
  }
}

【问题讨论】：

标签： css less

【解决方案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/

截图

【讨论】：

我试图用更少的时间做到这一点，并让它深入多个层次，而无需手动输入计算值。

【解决方案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));
    }
}

【讨论】：

虽然我不得不承认像ul li ul li ul li ul li ul li ... 这样的CSS 看起来至少很奇怪，但你的方法确实有问题。（所以我投票给@Fabrizio Calderan 的答案）。